41 lines
1 KiB
TypeScript
41 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>
|
||
|
|
)
|
||
|
|
}
|