diff options
Diffstat (limited to 'components/ColorMenu.tsx')
-rw-r--r-- | components/ColorMenu.tsx | 71 |
1 files changed, 0 insertions, 71 deletions
diff --git a/components/ColorMenu.tsx b/components/ColorMenu.tsx deleted file mode 100644 index 1bbf087..0000000 --- a/components/ColorMenu.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { ChevronDownIcon } from '@chakra-ui/icons' -import { - Text, - Box, - Button, - Flex, - Menu, - MenuButton, - MenuItem, - MenuList, - Portal, -} from '@chakra-ui/react' -import React, { useCallback } from 'react' -import { initialVisuals } from './config' - -export interface ColorMenuProps { - label: string - colorList: string[] - value: string - visValue: string - setVisuals?: any -} - -export const ColorMenu = (props: ColorMenuProps) => { - const { label, colorList, value, visValue, setVisuals } = props - - const clickCallback = useCallback( - (color) => - setVisuals((curr: typeof initialVisuals) => { - return { - ...curr, - [value]: color, - } - }), - [], - ) - return ( - <Flex alignItems="center" justifyContent="space-between"> - <Text>{label}</Text> - <Menu isLazy placement="right"> - <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}> - {<Box bgColor={visValue} borderRadius="sm" height={6} width={6}></Box>} - </MenuButton> - <Portal> - {' '} - <MenuList minW={10} zIndex="popover" bgColor="gray.200"> - <MenuItem - onClick={() => clickCallback('')} - justifyContent="space-between" - alignItems="center" - display="flex" - > - <Box height={6} width={6}></Box> - </MenuItem> - {colorList.map((color: string) => ( - <MenuItem - key={color} - onClick={() => clickCallback(color)} - justifyContent="space-between" - alignItems="center" - display="flex" - > - <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box> - </MenuItem> - ))} - </MenuList> - </Portal> - </Menu> - </Flex> - ) -} |