Adds tool lock

components/style-panel/width-picker.tsx

@@ -0,0 +1,82 @@
+import { DotsHorizontalIcon } from '@radix-ui/react-icons'
+import * as RadioGroup from '@radix-ui/react-radio-group'
+import { IconButton } from 'components/shared'
+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={18} />
+      </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',
+        },
+      },
+    },
+  },
+})