chore: separated out all tweak panels

1 files changed, 71 insertions, 0 deletions

diff --git a/components/ColorMenu.tsx b/components/ColorMenu.tsx
new file mode 100644
index 0000000..1bbf087
--- /dev/null
+++ b/components/ColorMenu.tsx
@@ -0,0 +1,71 @@
+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>
+  )
+}