import React, { useContext } from 'react' import { Box, Button, Flex, Menu, MenuButton, MenuItem, MenuList, Portal, Text, } from '@chakra-ui/react' import { themes } from '../themes' import { ChevronDownIcon } from '@chakra-ui/icons' import { ThemeContext } from '../../util/themecontext' export const ThemeSelect = () => { type Theme = { [key: string]: string } const { emacsTheme, setEmacsTheme, highlightColor } = useContext(ThemeContext) return ( <Flex alignItems="center" justifyContent="space-between" pl={7} pr={2}> <Text>Theme</Text> <Menu isLazy placement="bottom" closeOnSelect={false}> <MenuButton as={Button} size="sm" colorScheme="" color="black" rightIcon={<ChevronDownIcon />} > {emacsTheme[0]} </MenuButton> <MenuList minW={10} zIndex="popover" bgColor="gray.200"> <MenuItem onClick={() => ''} justifyContent="space-between" alignItems="center" display="flex" > <Box height={6} width={6}></Box> </MenuItem> {Object.keys(themes).map((theme: string, i: number) => ( <MenuItem key={theme} onClick={() => setEmacsTheme([theme, themes[theme]])} justifyContent="space-between" alignItems="center" display="flex" > <Text>{theme}</Text> <Flex height={6} width={20} flexDirection="column" flexWrap="wrap"> {Object.values(themes[theme as string]).map((color: string) => { return <Box key={color} bgColor={color} flex="1 1 8px"></Box> })} </Flex> </MenuItem> ))} </MenuList> </Menu> </Flex> ) }