gitscope
/
← marzneshin / app/dashboard/src/components/icon/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/components/icon/index.tsx · v0.1.4
Source
1 bf7c131 Mardin 2y ago import { Box, Text } from '@chakra-ui/react';
2 bf7c131 Mardin 2y ago import { FC, PropsWithChildren } from 'react';
3 a47eb4c Dawsh 2y ago
4 a47eb4c Dawsh 2y ago export type IconType = {
5 a47eb4c Dawsh 2y ago color: string;
6 a47eb4c Dawsh 2y ago };
7 a47eb4c Dawsh 2y ago
8 a47eb4c Dawsh 2y ago export const Icon: FC<PropsWithChildren<IconType>> = ({ children, color }) => {
9 a47eb4c Dawsh 2y ago return (
10 a47eb4c Dawsh 2y ago <Box
11 a47eb4c Dawsh 2y ago position="relative"
12 a47eb4c Dawsh 2y ago width="36px"
13 a47eb4c Dawsh 2y ago height="36px"
14 a47eb4c Dawsh 2y ago display="flex"
15 a47eb4c Dawsh 2y ago justifyContent="center"
16 a47eb4c Dawsh 2y ago alignItems="center"
17 a47eb4c Dawsh 2y ago _before={{
18 a47eb4c Dawsh 2y ago content: '""',
19 bf7c131 Mardin 2y ago display: 'block',
20 bf7c131 Mardin 2y ago position: 'absolute',
21 bf7c131 Mardin 2y ago top: '0',
22 bf7c131 Mardin 2y ago left: '0',
23 bf7c131 Mardin 2y ago width: 'calc(100%)',
24 bf7c131 Mardin 2y ago height: 'calc(100%)',
25 a47eb4c Dawsh 2y ago bg: `${color}.400`,
26 bf7c131 Mardin 2y ago opacity: '.5',
27 bf7c131 Mardin 2y ago borderRadius: '5px',
28 bf7c131 Mardin 2y ago zIndex: '1',
29 a47eb4c Dawsh 2y ago _dark: {
30 a47eb4c Dawsh 2y ago bg: `${color}.400`,
31 a47eb4c Dawsh 2y ago },
32 a47eb4c Dawsh 2y ago }}
33 a47eb4c Dawsh 2y ago _after={{
34 a47eb4c Dawsh 2y ago content: '""',
35 bf7c131 Mardin 2y ago display: 'block',
36 bf7c131 Mardin 2y ago position: 'absolute',
37 bf7c131 Mardin 2y ago top: '0',
38 bf7c131 Mardin 2y ago left: '0',
39 bf7c131 Mardin 2y ago width: 'calc(100% + 10px)',
40 bf7c131 Mardin 2y ago height: 'calc(100% + 10px)',
41 bf7c131 Mardin 2y ago transform: 'translate(-5px, -5px)',
42 a47eb4c Dawsh 2y ago bg: `${color}.400`,
43 bf7c131 Mardin 2y ago opacity: '.4',
44 bf7c131 Mardin 2y ago borderRadius: '8px',
45 bf7c131 Mardin 2y ago zIndex: '1',
46 a47eb4c Dawsh 2y ago _dark: {
47 a47eb4c Dawsh 2y ago bg: `${color}.400`,
48 a47eb4c Dawsh 2y ago },
49 a47eb4c Dawsh 2y ago }}
50 a47eb4c Dawsh 2y ago >
51 a47eb4c Dawsh 2y ago <Text
52 a47eb4c Dawsh 2y ago color={`${color}.500`}
53 a47eb4c Dawsh 2y ago _dark={{ color: `${color}.900` }}
54 a47eb4c Dawsh 2y ago position="relative"
55 a47eb4c Dawsh 2y ago zIndex="2"
56 a47eb4c Dawsh 2y ago >
57 a47eb4c Dawsh 2y ago {children}
58 a47eb4c Dawsh 2y ago </Text>
59 a47eb4c Dawsh 2y ago </Box>
60 a47eb4c Dawsh 2y ago );
61 a47eb4c Dawsh 2y ago };