Switches

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function SwitchesSection() {
29  const [switches, setSwitches] = useState<Record<string, boolean>>({ notifications: true, darkMode: false, autoSave: true });
30
31  const toggleSwitch = (key: string) => setSwitches((p) => ({ ...p, [key]: !p[key] }));
32
33  const items = [
34    { key: 'notifications', label: 'Notifications', desc: 'Receive push notifications', color: 'bg-brand-500' },
35    { key: 'darkMode', label: 'Dark Mode', desc: 'Use dark theme', color: 'bg-gray-800 dark:bg-gray-600' },
36    { key: 'autoSave', label: 'Auto Save', desc: 'Automatically save changes', color: 'bg-success-500' },
37  ];
38
39  return (
40    <SectionCard title="Switches" sourceSlug="/ui/source/ui-elements/switches">
41      <div className="space-y-5">
42        {/* Labeled Switches */}
43        <div className="max-w-md space-y-4">
44          {items.map((item) => (
45            <div key={item.key} className="flex items-center justify-between">
46              <div>
47                <p className="text-sm font-medium text-gray-800 dark:text-white/90">{item.label}</p>
48                <p className="text-xs text-gray-500 dark:text-gray-400">{item.desc}</p>
49              </div>
50              <button onClick={() => toggleSwitch(item.key)} className={`relative inline-flex h-6 w-11 shrink-0 rounded-full transition-colors ${switches[item.key] ? item.color : 'bg-gray-200 dark:bg-gray-700'}`}>
51                <span className={`inline-block size-5 rounded-full bg-white shadow-sm transition-transform ${switches[item.key] ? 'translate-x-5.5' : 'translate-x-0.5'} mt-0.5`} />
52              </button>
53            </div>
54          ))}
55        </div>
56        {/* Color Variants */}
57        <div>
58          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Color Variants</p>
59          <div className="flex flex-wrap gap-3">
60            {[
61              { label: 'Brand', color: 'bg-brand-500', on: true },
62              { label: 'Success', color: 'bg-success-500', on: true },
63              { label: 'Warning', color: 'bg-warning-500', on: true },
64              { label: 'Error', color: 'bg-error-500', on: true },
65            ].map((s) => (
66              <button key={s.label} className={`relative inline-flex h-6 w-11 rounded-full transition-colors ${s.on ? s.color : 'bg-gray-200 dark:bg-gray-700'}`}>
67                <span className={`inline-block size-5 rounded-full bg-white shadow-sm transition-transform ${s.on ? 'translate-x-5.5' : 'translate-x-0.5'} mt-0.5`} />
68              </button>
69            ))}
70          </div>
71        </div>
72      </div>
73    </SectionCard>
74  );
75}