Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 10x 8x 7x 8x 2x 8x | import { type HTMLAttributes, type ReactNode } from 'react';
import cn from 'classnames';
import type { Except } from 'type-fest';
import '../styles/components/bubble.scss';
type Props = {
/**
* The number to display
*/
children?: number;
/**
* The bubble size (default is medium)
*/
size?: 'small' | 'medium' | 'large';
};
const Bubble = ({
children,
size = 'medium',
className,
...props
}: Props & Except<HTMLAttributes<HTMLSpanElement>, 'children'>) => {
let displayValue: ReactNode | undefined;
if (children !== undefined && Number.isFinite(children)) {
displayValue = Math.round(children * 10) / 10;
}
if (children !== undefined && children > 99) {
displayValue = '99+';
}
return (
<span className={cn(className, `bubble--${size}`)} {...props}>
{displayValue}
</span>
);
};
export default Bubble;
|