Added switch component

src/components/Switch/Switch.sass

@@ -0,0 +1,39 @@
+.switch
+  display: inline-flex
+  align-items: center
+  cursor: pointer
+
+  &__control
+    display: inline-flex
+    align-items: center
+    height: 24px
+    width: 44px
+    border: 1px solid rgba(195, 195, 195, 0.9)
+    border-radius: 12px
+    padding: 0 2px
+    background-color: rgba(202, 202, 202, 0.9)
+    transition: 250ms background-color
+
+  &__input:focus-visible + &__control
+    outline: 2px solid hsl(200 98% 39%)
+    outline-offset: 2px
+
+  &__control[data-checked]
+    border-color: rgb(75, 117, 158)
+    background-color: rgb(72, 111, 149)
+
+  &__thumb
+    height: 20px
+    width: 20px
+    border-radius: 10px
+    background-color: white
+    transition: 250ms transform
+
+  &__thumb[data-checked]
+    transform: translateX(calc(100% - 1px))
+
+  &__label
+    margin-right: 1rem
+    color: white
+    font-size: 1rem
+    user-select: none

src/components/Switch/Switch.tsx

@@ -0,0 +1,25 @@
+import { Switch } from "@kobalte/core/switch";
+import "./Switch.sass";
+import { Show } from "solid-js/web";
+
+interface Props {
+  label: string
+  checked: boolean
+  onChange: () => void
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Switch class="switch" checked={props.checked} onChange={props.onChange}>
+        <Show when={props.label}>
+          <Switch.Label class="switch__label">{props.label}</Switch.Label>
+        </Show>
+        <Switch.Input class="switch__input" />
+        <Switch.Control class="switch__control">
+          <Switch.Thumb class="switch__thumb" />
+        </Switch.Control>
+      </Switch>
+    </>
+  )
+}

src/components/index.ts

@@ -22,6 +22,7 @@ export { default as Input } from './Input/Input'
 export { default as Radio } from './Radio/Radio'
 export { default as Copyright } from './Copyright/Copyright'
 export { default as Clickable } from './Clickable/Clickable'
+export { default as Switch } from './Switch/Switch'
 // export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
 // export { default as OptimizeImage } from './Optimizers/OptimizeImage'
 // export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'