46 lines
1,018 B
TypeScript
46 lines
1,018 B
TypeScript
import {
|
|
Group,
|
|
Item,
|
|
DashDashedIcon,
|
|
DashDottedIcon,
|
|
DashSolidIcon,
|
|
} from '../shared'
|
|
import * as RadioGroup from '@radix-ui/react-radio-group'
|
|
import { DashStyle } from 'types'
|
|
import state from 'state'
|
|
|
|
function handleChange(dash: string) {
|
|
state.send('CHANGED_STYLE', { dash })
|
|
}
|
|
|
|
interface Props {
|
|
dash: DashStyle
|
|
}
|
|
|
|
export default function DashPicker({ dash }: Props): JSX.Element {
|
|
return (
|
|
<Group name="Dash" onValueChange={handleChange}>
|
|
<Item
|
|
as={RadioGroup.RadioGroupItem}
|
|
value={DashStyle.Solid}
|
|
isActive={dash === DashStyle.Solid}
|
|
>
|
|
<DashSolidIcon />
|
|
</Item>
|
|
<Item
|
|
as={RadioGroup.RadioGroupItem}
|
|
value={DashStyle.Dashed}
|
|
isActive={dash === DashStyle.Dashed}
|
|
>
|
|
<DashDashedIcon />
|
|
</Item>
|
|
<Item
|
|
as={RadioGroup.RadioGroupItem}
|
|
value={DashStyle.Dotted}
|
|
isActive={dash === DashStyle.Dotted}
|
|
>
|
|
<DashDottedIcon />
|
|
</Item>
|
|
</Group>
|
|
)
|
|
}
|