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