43 lines
954 B
TypeScript
43 lines
954 B
TypeScript
import React from 'react';
|
|
import { Box } from '@chakra-ui/react';
|
|
|
|
const Badge = ({
|
|
children,
|
|
isDot = false,
|
|
max = 99,
|
|
count = 0
|
|
}: {
|
|
children: React.ReactNode;
|
|
isDot?: boolean;
|
|
max?: number;
|
|
count?: number;
|
|
}) => {
|
|
return (
|
|
<Box position={'relative'}>
|
|
{children}
|
|
{count > 0 && (
|
|
<Box position={'absolute'} right={0} top={0} transform={'translate(70%,-50%)'}>
|
|
{isDot ? (
|
|
<Box w={'5px'} h={'5px'} bg={'myRead.600'} borderRadius={'20px'}></Box>
|
|
) : (
|
|
<Box
|
|
color={'white'}
|
|
bg={'myRead.600'}
|
|
lineHeight={0.9}
|
|
borderRadius={'100px'}
|
|
px={'4px'}
|
|
py={'2px'}
|
|
fontSize={'12px'}
|
|
border={'1px solid white'}
|
|
>
|
|
{count > max ? `${max}+` : count}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Badge;
|