27 lines
817 B
TypeScript
27 lines
817 B
TypeScript
import { IconButton } from 'components/shared'
|
|
import { strokes } from 'state/shape-styles'
|
|
import { ColorStyle } from 'types'
|
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
|
import { Square } from 'react-feather'
|
|
import { DropdownContent } from '../shared'
|
|
|
|
export default function ColorContent({
|
|
onChange,
|
|
}: {
|
|
onChange: (color: ColorStyle) => void
|
|
}): JSX.Element {
|
|
return (
|
|
<DropdownContent sideOffset={8} side="bottom">
|
|
{Object.keys(strokes).map((color: ColorStyle) => (
|
|
<DropdownMenu.DropdownMenuItem
|
|
as={IconButton}
|
|
key={color}
|
|
title={color}
|
|
onSelect={() => onChange(color)}
|
|
>
|
|
<Square fill={strokes[color]} stroke="none" size="22" />
|
|
</DropdownMenu.DropdownMenuItem>
|
|
))}
|
|
</DropdownContent>
|
|
)
|
|
}
|