tldraw/components/style-panel/color-content.tsx
2021-06-16 13:09:45 +01:00

27 lines
802 B
TypeScript

import { IconButton } from 'components/shared'
import { strokes } from 'lib/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
}) {
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>
)
}