50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import Card from '@/components/card/Card';
|
|
import { Box, Flex, Text, useColorModeValue } from '@chakra-ui/react';
|
|
|
|
const Statistics = (props: {
|
|
icon?: JSX.Element;
|
|
title: string;
|
|
value: number | string;
|
|
endContent?: JSX.Element;
|
|
}) => {
|
|
const { icon, title, value, endContent } = props;
|
|
const textColorSecondary = useColorModeValue('gray.700', 'white');
|
|
const textColor = useColorModeValue('#120F43', 'white');
|
|
return (
|
|
<Card
|
|
w="100%"
|
|
justifyContent="space-between"
|
|
borderRadius="14px"
|
|
bg="white"
|
|
py="30px"
|
|
>
|
|
<Flex gap="12px" alignItems={'center'}>
|
|
{icon}
|
|
<Box>
|
|
<Text
|
|
as="h5"
|
|
fontSize="sm"
|
|
fontWeight={'500'}
|
|
color={textColorSecondary}
|
|
>
|
|
{title}
|
|
</Text>
|
|
<Text
|
|
color={textColor}
|
|
fontWeight="700"
|
|
mt="4px"
|
|
fontSize="24px"
|
|
lineHeight={'24px'}
|
|
>
|
|
{value}
|
|
</Text>
|
|
</Box>
|
|
</Flex>
|
|
|
|
{endContent}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default Statistics;
|