37 lines
853 B
TypeScript
37 lines
853 B
TypeScript
import React, { CSSProperties, ReactNode } from 'react';
|
|
import { Box, Badge, toRem, Text } from 'folds';
|
|
import { millify } from '../../plugins/millify';
|
|
|
|
type UnreadBadgeProps = {
|
|
highlight?: boolean;
|
|
count: number;
|
|
};
|
|
const styles: CSSProperties = {
|
|
minWidth: toRem(16),
|
|
};
|
|
export function UnreadBadgeCenter({ children }: { children: ReactNode }) {
|
|
return (
|
|
<Box as="span" style={styles} shrink="No" alignItems="Center" justifyContent="Center">
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export function UnreadBadge({ highlight, count }: UnreadBadgeProps) {
|
|
if (count === 0) return null;
|
|
|
|
return (
|
|
<Badge
|
|
variant={highlight ? 'Success' : 'Secondary'}
|
|
size="400"
|
|
fill="Solid"
|
|
radii="Pill"
|
|
outlined={false}
|
|
>
|
|
<Text as="span" size="L400">
|
|
{millify(count)}
|
|
</Text>
|
|
</Badge>
|
|
);
|
|
}
|