1
 2import { Box, Text, Card, ChakraProps, HStack } from '@chakra-ui/react';
 3import { FC } from 'react';
 4import { StatisticCardProps } from './statistics-props';
 5
 6export const StatisticsWidget: FC<ChakraProps & StatisticCardProps> = ({ icon, content, title, ...chakraProps }) => {
 7  return (
 8    <Card
 9      p={6}
10      borderWidth="1px"
11      borderColor="light-border"
12      bg="#F9FAFB"
13      _dark={{ borderColor: 'gray.600', bg: 'gray.750' }}
14      borderStyle="solid"
15      boxShadow="none"
16      borderRadius="12px"
17      width="full"
18      display="flex"
19      justifyContent="space-between"
20      {...chakraProps}
21    >
22      <HStack alignItems="center" columnGap="4">
23        <Box
24          p="2"
25          position="relative"
26          color="white"
27          _before={{
28            content: '""',
29            position: 'absolute',
30            top: 0,
31            left: 0,
32            bg: 'primary.400',
33            display: 'block',
34            w: 'full',
35            h: 'full',
36            borderRadius: '5px',
37            opacity: '.5',
38            z: '1',
39          }}
40          _after={{
41            content: '""',
42            position: 'absolute',
43            top: '-5px',
44            left: '-5px',
45            bg: 'primary.400',
46            display: 'block',
47            w: 'calc(100% + 10px)',
48            h: 'calc(100% + 10px)',
49            borderRadius: '8px',
50            opacity: '.4',
51            z: '1',
52          }}
53        >
54          {icon}
55        </Box>
56        <Text
57          color="gray.600"
58          _dark={{
59            color: 'gray.300',
60          }}
61          fontWeight="medium"
62          textTransform="capitalize"
63          fontSize="sm"
64        >
65          {title}
66        </Text>
67      </HStack>
68      <Box fontSize="3xl" fontWeight="semibold" mt="2">
69        {content}
70      </Box>
71    </Card>
72  );
73};