summaryrefslogtreecommitdiff
path: root/components/ColorMenu.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-09-25 16:11:31 +0200
committerThomas F. K. Jorna <[email protected]>2021-09-25 16:11:31 +0200
commitee8539a9351374a719c9026f85d85e7b4ea6e8f5 (patch)
treef9220fd304bd3669523df39ddaa0992919ccc4a6 /components/ColorMenu.tsx
parent075d3831ffae63f128bcaabf9fc5e70ade41ad33 (diff)
chore: move tweaks to separate subfolder
Diffstat (limited to 'components/ColorMenu.tsx')
-rw-r--r--components/ColorMenu.tsx71
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>
- )
-}