tldraw/components/style-panel/size-picker.tsx
2021-06-03 13:06:39 +01:00

40 lines
1 KiB
TypeScript

import { Group, Item } from '../shared'
import * as RadioGroup from '@radix-ui/react-radio-group'
import { ChangeEvent } from 'react'
import { Circle } from 'react-feather'
import state from 'state'
import { SizeStyle } from 'types'
function handleChange(e: ChangeEvent<HTMLInputElement>) {
state.send('CHANGED_STYLE', {
size: e.currentTarget.value as SizeStyle,
})
}
export default function SizePicker({ size }: { size: SizeStyle }) {
return (
<Group name="width" onValueChange={handleChange}>
<Item
as={RadioGroup.Item}
value={SizeStyle.Small}
isActive={size === SizeStyle.Small}
>
<Circle size={6} />
</Item>
<Item
as={RadioGroup.Item}
value={SizeStyle.Medium}
isActive={size === SizeStyle.Medium}
>
<Circle size={12} />
</Item>
<Item
as={RadioGroup.Item}
value={SizeStyle.Large}
isActive={size === SizeStyle.Large}
>
<Circle size={22} />
</Item>
</Group>
)
}