1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
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}>
<Text>Theme</Text>
<Menu isLazy placement="bottom" closeOnSelect={false}>
<MenuButton as={Button} 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>
)
}
|
