45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
|
import { DropdownMenuIconTriggerButton } from 'components/shared'
|
|
import { strokes } from 'state/shape-styles'
|
|
import state, { useSelector } from 'state'
|
|
import { BoxIcon, StyleDropdownItem, StyleDropdownContent } from './shared'
|
|
import { useTheme } from 'next-themes'
|
|
import { ColorStyle } from 'types'
|
|
|
|
function handleColorChange(color: ColorStyle): void {
|
|
state.send('CHANGED_STYLE', { color })
|
|
}
|
|
|
|
export default function QuickColorSelect(): JSX.Element {
|
|
const color = useSelector((s) => s.values.selectedStyle.color)
|
|
const { theme } = useTheme()
|
|
|
|
return (
|
|
<DropdownMenu.Root dir="ltr">
|
|
<DropdownMenuIconTriggerButton label="Color">
|
|
<BoxIcon fill={strokes[theme][color]} stroke={strokes[theme][color]} />
|
|
</DropdownMenuIconTriggerButton>
|
|
<DropdownMenu.Content sideOffset={8}>
|
|
<DropdownMenu.DropdownMenuRadioGroup
|
|
value={color}
|
|
onValueChange={handleColorChange}
|
|
as={StyleDropdownContent}
|
|
>
|
|
{Object.keys(strokes[theme]).map((colorStyle: ColorStyle) => (
|
|
<DropdownMenu.DropdownMenuRadioItem
|
|
as={StyleDropdownItem}
|
|
key={colorStyle}
|
|
title={colorStyle}
|
|
value={colorStyle}
|
|
>
|
|
<BoxIcon
|
|
fill={strokes[theme][colorStyle]}
|
|
stroke={strokes[theme][colorStyle]}
|
|
/>
|
|
</DropdownMenu.DropdownMenuRadioItem>
|
|
))}
|
|
</DropdownMenu.DropdownMenuRadioGroup>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
)
|
|
}
|