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