Add unit setting (#183)

* Add Toggle component

* Add default units to settings

* Add defaultBaseUnit, shorten settings names

* Make debug panel use Toggle, fix colors

* add eslint-plugin-css-modules

src/components/Toggle/Toggle.module.css

@@ -0,0 +1,32 @@
+.toggle {
+    @apply flex items-center gap-2 w-fit;
+    --toggle-size: 1.25rem;
+    --padding: 0.25rem;
+}
+
+.toggle:focus-within > span {
+    @apply outline-none ring-2;
+}
+
+.toggle input {
+    @apply sr-only;
+}
+
+.toggle > span {
+    @apply relative rounded border border-chalkboard-110;
+    width: calc(2 * (var(--toggle-size) + var(--padding)));
+    height: calc(var(--toggle-size) + var(--padding));
+}
+
+.toggle > span::after {
+    content: '';
+    @apply absolute w-4 h-4 rounded-sm bg-chalkboard-110;
+    top: 50%;
+    left: 50%;
+    translate: calc(-100% - var(--padding)) -50%;
+    transition: translate 0.08s ease-out;
+}
+
+.toggle input:checked + span::after {
+    translate: calc(50% - var(--padding)) -50%;
+}

src/components/Toggle/Toggle.tsx

@@ -0,0 +1,34 @@
+import styles from './Toggle.module.css'
+
+interface ToggleProps {
+  className?: string
+  offLabel?: string
+  onLabel?: string
+  name: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  checked: boolean
+}
+
+export const Toggle = ({
+  className = '',
+  offLabel = 'Off',
+  onLabel = 'On',
+  name = '',
+  onChange,
+  checked,
+}: ToggleProps) => {
+  return (
+    <label className={`${styles.toggle} ${className}`}>
+      {offLabel}
+      <input
+        type="checkbox"
+        name={name}
+        id={name}
+        checked={checked}
+        onChange={onChange}
+      />
+      <span></span>
+      {onLabel}
+    </label>
+  )
+}