gitscope
/
← marzneshin / app/dashboard/src/components/list-check-box/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/list-check-box/index.tsx · v0.1.2
Source
1 912788f Mardin 2y ago
2 912788f Mardin 2y ago
3 912788f Mardin 2y ago import {
4 912788f Mardin 2y ago Box,
5 912788f Mardin 2y ago } from '@chakra-ui/react';
6 fcfb963 Mardin 2y ago import { ReactNode, Ref } from 'react';
7 912788f Mardin 2y ago
8 912788f Mardin 2y ago type ListCheckboxProps = {
9 912788f Mardin 2y ago isChecked: boolean;
10 912788f Mardin 2y ago onChange: () => void;
11 912788f Mardin 2y ago renderContent: () => ReactNode;
12 912788f Mardin 2y ago value: string;
13 fcfb963 Mardin 2y ago ref?: Ref<HTMLDivElement>;
14 912788f Mardin 2y ago }
15 912788f Mardin 2y ago
16 fcfb963 Mardin 2y ago
17 fcfb963 Mardin 2y ago export const ListCheckBox = (
18 fcfb963 Mardin 2y ago { isChecked, onChange, renderContent, ref, ...props }: ListCheckboxProps,
19 fcfb963 Mardin 2y ago
20 fcfb963 Mardin 2y ago ) => {
21 fcfb963 Mardin 2y ago const darkStyle = { bg: isChecked ? 'gray.800' : 'transparent' };
22 fcfb963 Mardin 2y ago
23 fcfb963 Mardin 2y ago return (
24 912788f Mardin 2y ago <Box
25 912788f Mardin 2y ago ref={ref}
26 fcfb963 Mardin 2y ago border={isChecked ? '5px' : '3px'}
27 912788f Mardin 2y ago w="full"
28 912788f Mardin 2y ago borderColor={isChecked ? 'primary.500' : 'gray.600'}
29 912788f Mardin 2y ago boxShadow={
30 912788f Mardin 2y ago isChecked
31 912788f Mardin 2y ago ? '0 0 0 3px rgba(102, 126, 234, 0.6)'
32 912788f Mardin 2y ago : '0 0 0 1px rgba(102, 126, 234, 0.6)'
33 912788f Mardin 2y ago }
34 fcfb963 Mardin 2y ago bg={isChecked ? 'gray.100' : 'transparent'}
35 fcfb963 Mardin 2y ago _dark={darkStyle}
36 912788f Mardin 2y ago py="4px"
37 912788f Mardin 2y ago px="8px"
38 912788f Mardin 2y ago borderRadius="md"
39 912788f Mardin 2y ago display="flex"
40 912788f Mardin 2y ago alignItems="center"
41 912788f Mardin 2y ago justifyContent="center"
42 912788f Mardin 2y ago _hover={{
43 912788f Mardin 2y ago cursor: 'pointer',
44 912788f Mardin 2y ago borderColor: 'primary.300',
45 912788f Mardin 2y ago }}
46 912788f Mardin 2y ago onClick={onChange}
47 912788f Mardin 2y ago {...props}
48 912788f Mardin 2y ago >
49 912788f Mardin 2y ago {renderContent()}
50 912788f Mardin 2y ago </Box>
51 fcfb963 Mardin 2y ago );
52 fcfb963 Mardin 2y ago }