1 files changed, 88 insertions, 0 deletions
diff --git a/components/Tweaks/Visual/ColorMenu.tsx b/components/Tweaks/Visual/ColorMenu.tsx
new file mode 100644
index 0000000..a792f12
--- /dev/null
+++ b/components/Tweaks/Visual/ColorMenu.tsx
@@ -0,0 +1,88 @@
+import { ChevronDownIcon } from '@chakra-ui/icons'
+import {
+  Text,
+  Box,
+  Button,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Portal,
+  PopoverTrigger,
+  PopoverContent,
+  Popover,
+} 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
+  noEmpty?: boolean
+}
+
+export const ColorMenu = (props: ColorMenuProps) => {
+  const { label, colorList, value, visValue, setVisuals, noEmpty } = props
+
+  const clickCallback = useCallback(
+    (color) =>
+      setVisuals((curr: typeof initialVisuals) => {
+        return {
+          ...curr,
+          [value]: color,
+        }
+      }),
+    [],
+  )
+  return (
+    <Flex alignItems="center" justifyContent="space-between">
+      <Text>{label}</Text>
+      <Popover isLazy placement="right">
+        <PopoverTrigger>
+          <Button colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
+            {<Box bgColor={visValue} borderRadius="sm" height={6} width={6}></Box>}
+          </Button>
+        </PopoverTrigger>
+        <Portal>
+          <PopoverContent zIndex="tooltip" maxW={36} position="relative">
+            <Flex flexWrap="wrap" bgColor="gray.200">
+              {!noEmpty && (
+                <Box
+                  onClick={() => clickCallback('')}
+                  justifyContent="space-between"
+                  alignItems="center"
+                  display="flex"
+                  m={1}
+                >
+                  <Box
+                    height={6}
+                    width={6}
+                    borderColor="gray.600"
+                    borderRadius="xl"
+                    borderWidth={1}
+                  ></Box>
+                </Box>
+              )}
+              {colorList.map((color: string) => (
+                <Box
+                  m={1}
+                  key={color}
+                  onClick={() => clickCallback(color)}
+                  justifyContent="space-between"
+                  alignItems="center"
+                  display="flex"
+                >
+                  <Box bgColor={color} borderRadius="xl" height={6} width={6}></Box>
+                </Box>
+              ))}
+            </Flex>
+          </PopoverContent>
+        </Portal>
+      </Popover>
+    </Flex>
+  )
+}