65 lines
1.5 KiB
TypeScript
65 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import Card from '@/components/card/Card';
|
|
import {
|
|
Flex,
|
|
Stat,
|
|
StatLabel,
|
|
StatNumber,
|
|
useColorModeValue,
|
|
Text,
|
|
} from '@chakra-ui/react';
|
|
|
|
export default function Default(props: {
|
|
startContent?: JSX.Element;
|
|
endContent?: JSX.Element;
|
|
name: string;
|
|
growth?: string | number;
|
|
value: string | number;
|
|
}) {
|
|
const { startContent, endContent, name, growth, value } = props;
|
|
const textColor = useColorModeValue('#120F43', 'white');
|
|
const textColorSecondary = 'gray.500';
|
|
|
|
return (
|
|
<Card>
|
|
<Flex
|
|
my="auto"
|
|
h="100%"
|
|
align={{ base: 'center', xl: 'start' }}
|
|
justify={{ base: 'center', xl: 'center' }}
|
|
alignItems="center"
|
|
>
|
|
{startContent}
|
|
|
|
<Stat my="auto" ms={startContent ? '18px' : '0px'}>
|
|
<StatLabel
|
|
lineHeight="100%"
|
|
color={textColorSecondary}
|
|
fontSize="sm"
|
|
mb="4px"
|
|
>
|
|
{name}
|
|
</StatLabel>
|
|
<StatNumber color={textColor} fontWeight="700" fontSize="lg">
|
|
{value}
|
|
</StatNumber>
|
|
{growth ? (
|
|
<Flex align="center">
|
|
<Text color="green.500" fontSize="xs" fontWeight="700" me="5px">
|
|
{growth}
|
|
</Text>
|
|
<Text color="gray.500" fontSize="xs" fontWeight="400">
|
|
since last month
|
|
</Text>
|
|
</Flex>
|
|
) : null}
|
|
</Stat>
|
|
<Flex ms="auto" w="max-content">
|
|
{endContent}
|
|
</Flex>
|
|
</Flex>
|
|
</Card>
|
|
);
|
|
}
|