2022-07-22 09:31:08 +02:00
|
|
|
import { styled, SxProps, Theme } from '@mui/material';
|
|
|
|
import {
|
|
|
|
cloneElement,
|
|
|
|
FC,
|
|
|
|
ForwardedRef,
|
|
|
|
forwardRef,
|
|
|
|
ReactElement,
|
|
|
|
ReactNode,
|
|
|
|
} from 'react';
|
|
|
|
import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
|
|
|
|
|
|
|
|
type Color = 'info' | 'success' | 'warning' | 'error' | 'secondary' | 'neutral';
|
|
|
|
|
|
|
|
interface IBadgeProps {
|
|
|
|
color?: Color;
|
|
|
|
icon?: ReactElement;
|
|
|
|
className?: string;
|
|
|
|
sx?: SxProps<Theme>;
|
|
|
|
children?: ReactNode;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface IBadgeIconProps {
|
|
|
|
color?: Color;
|
|
|
|
}
|
|
|
|
|
|
|
|
const StyledBadge = styled('div')<IBadgeProps>(
|
2022-07-26 19:50:19 +02:00
|
|
|
({ theme, color = 'neutral', icon }) => ({
|
2022-07-22 09:31:08 +02:00
|
|
|
display: 'inline-flex',
|
|
|
|
alignItems: 'center',
|
2022-07-26 19:50:19 +02:00
|
|
|
padding: theme.spacing(icon ? 0.375 : 0.625, 1),
|
2022-07-22 09:31:08 +02:00
|
|
|
borderRadius: theme.shape.borderRadius,
|
|
|
|
fontSize: theme.fontSizes.smallerBody,
|
2022-07-26 19:50:19 +02:00
|
|
|
fontWeight: theme.fontWeight.bold,
|
|
|
|
lineHeight: 1,
|
2022-07-22 09:31:08 +02:00
|
|
|
backgroundColor: theme.palette[color].light,
|
|
|
|
color: theme.palette[color].dark,
|
|
|
|
border: `1px solid ${theme.palette[color].border}`,
|
|
|
|
})
|
|
|
|
);
|
|
|
|
|
|
|
|
const StyledBadgeIcon = styled('div')<IBadgeIconProps>(
|
|
|
|
({ theme, color = 'neutral' }) => ({
|
|
|
|
display: 'flex',
|
|
|
|
color: theme.palette[color].main,
|
|
|
|
marginRight: theme.spacing(0.5),
|
|
|
|
})
|
|
|
|
);
|
|
|
|
|
|
|
|
export const Badge: FC<IBadgeProps> = forwardRef(
|
|
|
|
(
|
|
|
|
{
|
|
|
|
color = 'neutral',
|
|
|
|
icon,
|
|
|
|
className,
|
|
|
|
sx,
|
|
|
|
children,
|
|
|
|
...props
|
|
|
|
}: IBadgeProps,
|
|
|
|
ref: ForwardedRef<HTMLDivElement>
|
|
|
|
) => (
|
|
|
|
<StyledBadge
|
|
|
|
color={color}
|
2022-07-26 19:50:19 +02:00
|
|
|
icon={icon}
|
2022-07-22 09:31:08 +02:00
|
|
|
className={className}
|
|
|
|
sx={sx}
|
|
|
|
{...props}
|
|
|
|
ref={ref}
|
|
|
|
>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={Boolean(icon)}
|
|
|
|
show={
|
|
|
|
<StyledBadgeIcon color={color}>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={Boolean(icon?.props.sx)}
|
|
|
|
show={icon}
|
|
|
|
elseShow={() =>
|
|
|
|
cloneElement(icon!, {
|
|
|
|
sx: { fontSize: '16px' },
|
|
|
|
})
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</StyledBadgeIcon>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
{children}
|
|
|
|
</StyledBadge>
|
|
|
|
)
|
|
|
|
);
|