@kinvolk/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
51 lines (50 loc) • 2.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright 2025 The Kubernetes Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Icon } from '@iconify/react';
import Box from '@mui/material/Box';
import { useTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
/**
* ClusterBadge displays an icon with a colored circle and cluster name
* Used in the sidebar to show selected clusters
*/
export default function ClusterBadge({ name, accentColor, icon }) {
const theme = useTheme();
const iconColor = theme.palette.primary.main;
const backgroundColor = theme.palette.secondary.main;
return (_jsxs(Box, { sx: {
display: 'flex',
alignItems: 'center',
gap: 0.75,
}, children: [icon && (_jsx(Box, { sx: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 28,
height: 28,
borderRadius: '50%',
backgroundColor,
border: `2px solid ${accentColor}`,
flexShrink: 0,
}, children: _jsx(Icon, { icon: icon, color: iconColor, width: 20, height: 20, "data-testid": "cluster-badge-icon" }) })), _jsx(Typography, { variant: "caption", sx: {
fontSize: '0.875rem',
fontWeight: 500,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}, children: name })] }));
}