You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

size-picker.tsx 949B

12345678910111213141516171819202122232425262728293031323334353637
  1. import { Group, Item } from '../shared'
  2. import * as RadioGroup from '@radix-ui/react-radio-group'
  3. import { Circle } from 'react-feather'
  4. import state from 'state'
  5. import { SizeStyle } from 'types'
  6. function handleChange(size: string) {
  7. state.send('CHANGED_STYLE', { size })
  8. }
  9. export default function SizePicker({ size }: { size: SizeStyle }): JSX.Element {
  10. return (
  11. <Group name="width" onValueChange={handleChange}>
  12. <Item
  13. as={RadioGroup.Item}
  14. value={SizeStyle.Small}
  15. isActive={size === SizeStyle.Small}
  16. >
  17. <Circle size={6} />
  18. </Item>
  19. <Item
  20. as={RadioGroup.Item}
  21. value={SizeStyle.Medium}
  22. isActive={size === SizeStyle.Medium}
  23. >
  24. <Circle size={12} />
  25. </Item>
  26. <Item
  27. as={RadioGroup.Item}
  28. value={SizeStyle.Large}
  29. isActive={size === SizeStyle.Large}
  30. >
  31. <Circle size={22} />
  32. </Item>
  33. </Group>
  34. )
  35. }