1import { Box, Text } from '@chakra-ui/react';
 2import { FC, PropsWithChildren } from 'react';
 3
 4export type IconType = {
 5  color: string;
 6};
 7
 8export const Icon: FC<PropsWithChildren<IconType>> = ({ children, color }) => {
 9  return (
10    <Box
11      position="relative"
12      width="36px"
13      height="36px"
14      display="flex"
15      justifyContent="center"
16      alignItems="center"
17      _before={{
18        content: '""',
19        display: 'block',
20        position: 'absolute',
21        top: '0',
22        left: '0',
23        width: 'calc(100%)',
24        height: 'calc(100%)',
25        bg: `${color}.400`,
26        opacity: '.5',
27        borderRadius: '5px',
28        zIndex: '1',
29        _dark: {
30          bg: `${color}.400`,
31        },
32      }}
33      _after={{
34        content: '""',
35        display: 'block',
36        position: 'absolute',
37        top: '0',
38        left: '0',
39        width: 'calc(100% + 10px)',
40        height: 'calc(100% + 10px)',
41        transform: 'translate(-5px, -5px)',
42        bg: `${color}.400`,
43        opacity: '.4',
44        borderRadius: '8px',
45        zIndex: '1',
46        _dark: {
47          bg: `${color}.400`,
48        },
49      }}
50    >
51      <Text
52        color={`${color}.500`}
53        _dark={{ color: `${color}.900` }}
54        position="relative"
55        zIndex="2"
56      >
57        {children}
58      </Text>
59    </Box>
60  );
61};