1 files changed, 25 insertions, 0 deletions
diff --git a/src/components/UI/Toggle.tsx b/src/components/UI/Toggle.tsx
new file mode 100644
index 0000000..17b98e2
--- /dev/null
+++ b/src/components/UI/Toggle.tsx
@@ -0,0 +1,25 @@
+interface ToggleProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  disabled?: boolean
+}
+
+export default function Toggle({ checked, onChange, disabled }: ToggleProps) {
+  return (
+    <button
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      className="relative inline-flex h-5 w-9 shrink-0 rounded-full transition-colors duration-200 disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-transparent"
+      style={{
+        backgroundColor: checked ? 'var(--color-accent)' : 'var(--color-panel-border)',
+      }}
+      onClick={() => { if (!disabled) onChange(!checked) }}
+    >
+      <span
+        className="inline-block h-[16px] w-[16px] rounded-full bg-white shadow-sm transition-transform duration-200"
+        style={{ transform: checked ? 'translateX(18px)' : 'translateX(3px)', marginTop: '2px' }}
+      />
+    </button>
+  )
+}