From 49675cc75d6838d82d20360d2b3e81df0c0bb5d5 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Mon, 5 Jan 2026 17:32:18 +0800
Subject: [PATCH] Added switch component

---
 src/components/Switch/Switch.sass | 39 +++++++++++++++++++++++++++++++
 src/components/Switch/Switch.tsx  | 25 ++++++++++++++++++++
 src/components/index.ts           |  1 +
 3 files changed, 65 insertions(+)
 create mode 100644 src/components/Switch/Switch.sass
 create mode 100644 src/components/Switch/Switch.tsx

diff --git a/src/components/Switch/Switch.sass b/src/components/Switch/Switch.sass
new file mode 100644
index 0000000..74536d9
--- /dev/null
+++ b/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
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
new file mode 100644
index 0000000..7be6996
--- /dev/null
+++ b/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>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index 8b43021..c46f487 100644
--- a/src/components/index.ts
+++ b/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'