30 lines
780 B
TypeScript
30 lines
780 B
TypeScript
import { Group, RadioItem } from './shared'
|
|
import { ChangeEvent } from 'react'
|
|
import { Circle } from 'react-feather'
|
|
import state from 'state'
|
|
|
|
function handleChange(e: ChangeEvent<HTMLInputElement>) {
|
|
state.send('CHANGED_STYLE', {
|
|
strokeWidth: Number(e.currentTarget.value),
|
|
})
|
|
}
|
|
|
|
export default function WidthPicker({
|
|
strokeWidth = 2,
|
|
}: {
|
|
strokeWidth?: number
|
|
}) {
|
|
return (
|
|
<Group name="width" onValueChange={handleChange}>
|
|
<RadioItem value="2" isActive={strokeWidth === 2}>
|
|
<Circle size={6} />
|
|
</RadioItem>
|
|
<RadioItem value="4" isActive={strokeWidth === 4}>
|
|
<Circle size={12} />
|
|
</RadioItem>
|
|
<RadioItem value="8" isActive={strokeWidth === 8}>
|
|
<Circle size={22} />
|
|
</RadioItem>
|
|
</Group>
|
|
)
|
|
}
|