80 lines
1.6 KiB
TypeScript
80 lines
1.6 KiB
TypeScript
import * as RadioGroup from '@radix-ui/react-radio-group'
|
|
import { ChangeEvent } from 'react'
|
|
import { Circle } from 'react-feather'
|
|
import state from 'state'
|
|
import styled from 'styles'
|
|
|
|
function setWidth(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={setWidth}>
|
|
<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>
|
|
)
|
|
}
|
|
|
|
const Group = styled(RadioGroup.Root, {
|
|
display: 'flex',
|
|
})
|
|
|
|
const RadioItem = styled(RadioGroup.Item, {
|
|
height: '32px',
|
|
width: '32px',
|
|
backgroundColor: '$panel',
|
|
borderRadius: '4px',
|
|
padding: '0',
|
|
margin: '0',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
outline: 'none',
|
|
border: 'none',
|
|
pointerEvents: 'all',
|
|
cursor: 'pointer',
|
|
|
|
'&:hover:not(:disabled)': {
|
|
backgroundColor: '$hover',
|
|
'& svg': {
|
|
fill: '$text',
|
|
strokeWidth: '0',
|
|
},
|
|
},
|
|
|
|
'&:disabled': {
|
|
opacity: '0.5',
|
|
},
|
|
|
|
variants: {
|
|
isActive: {
|
|
true: {
|
|
'& svg': {
|
|
fill: '$text',
|
|
strokeWidth: '0',
|
|
},
|
|
},
|
|
false: {
|
|
'& svg': {
|
|
fill: '$inactive',
|
|
strokeWidth: '0',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
})
|