Checkboxes

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Check, Code2, Minus } 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 CheckboxesSection() {
29  const [checked, setChecked] = useState<Record<string, boolean>>({ terms: true, newsletter: false, updates: true, analytics: false });
30  const toggle = (key: string) => setChecked((p) => ({ ...p, [key]: !p[key] }));
31  const allChecked = checked.terms && checked.newsletter && checked.updates && checked.analytics;
32  const noneChecked = !checked.terms && !checked.newsletter && !checked.updates && !checked.analytics;
33
34  return (
35    <SectionCard title="Checkboxes" sourceSlug="/ui/source/ui-elements/checkboxes">
36      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
37        {/* Individual Checkboxes */}
38        <div>
39          <p className="mb-3 text-xs font-medium uppercase tracking-wider text-gray-400">Individual</p>
40          <div className="space-y-3">
41            {[
42              { key: 'terms', label: 'Accept terms and conditions', desc: 'Required to continue' },
43              { key: 'newsletter', label: 'Subscribe to newsletter', desc: 'Weekly updates' },
44              { key: 'updates', label: 'Product updates', desc: 'New features and fixes' },
45              { key: 'analytics', label: 'Usage analytics', desc: 'Help us improve' },
46            ].map((item) => (
47              <label key={item.key} className="flex items-start gap-3 cursor-pointer">
48                <button onClick={() => toggle(item.key)} className={`mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-md border-2 transition-colors ${checked[item.key] ? 'border-brand-500 bg-brand-500' : 'border-gray-300 dark:border-gray-600'}`}>
49                  {checked[item.key] && <Check className="size-3 text-white" strokeWidth={3} />}
50                </button>
51                <div>
52                  <p className="text-sm font-medium text-gray-800 dark:text-white/90">{item.label}</p>
53                  <p className="text-xs text-gray-500 dark:text-gray-400">{item.desc}</p>
54                </div>
55              </label>
56            ))}
57          </div>
58        </div>
59        {/* Indeterminate */}
60        <div>
61          <p className="mb-3 text-xs font-medium uppercase tracking-wider text-gray-400">Select All (Indeterminate)</p>
62          <div className="space-y-3">
63            <label className="flex items-center gap-3 cursor-pointer rounded-lg border border-gray-200 p-3 dark:border-white/5">
64              <button onClick={() => { const next = !allChecked; setChecked({ terms: next, newsletter: next, updates: next, analytics: next }); }} className={`flex size-5 shrink-0 items-center justify-center rounded-md border-2 transition-colors ${allChecked ? 'border-brand-500 bg-brand-500' : noneChecked ? 'border-gray-300 dark:border-gray-600' : 'border-brand-500 bg-brand-500'}`}>
65                {allChecked && <Check className="size-3 text-white" strokeWidth={3} />}
66                {!allChecked && !noneChecked && <Minus className="size-3 text-white" strokeWidth={3} />}
67              </button>
68              <span className="text-sm font-medium text-gray-800 dark:text-white/90">Select All</span>
69            </label>
70            <p className="text-xs text-gray-400 dark:text-gray-500">{Object.values(checked).filter(Boolean).length} of 4 selected</p>
71          </div>
72        </div>
73      </div>
74    </SectionCard>
75  );
76}