Collapsible Sections

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Settings, Code2, ChevronDown, Shield, Cpu } 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 CollapsibleSectionsSection() {
29  const [openSections, setOpenSections] = useState<Record<string, boolean>>({ general: true, advanced: false });
30
31  const sections = [
32    { id: 'general', title: 'General Settings', icon: Settings, content: 'Configure your basic application settings including language, timezone, and display preferences.' },
33    { id: 'advanced', title: 'Advanced Options', icon: Cpu, content: 'Access advanced configuration options for performance tuning, caching, and debugging.' },
34    { id: 'security', title: 'Security', icon: Shield, content: 'Manage security settings including two-factor authentication, session management, and IP allowlisting.' },
35  ];
36
37  const toggle = (id: string) => setOpenSections((p) => ({ ...p, [id]: !p[id] }));
38
39  return (
40    <SectionCard title="Collapsible Sections" sourceSlug="/ui/source/ui-elements/collapsible-sections">
41      <div className="max-w-md space-y-2">
42        {sections.map((s) => (
43          <div key={s.id} className="rounded-xl border border-gray-200 dark:border-white/5 overflow-hidden">
44            <button onClick={() => toggle(s.id)} className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium text-gray-800 dark:text-white/90 hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
45              <div className="flex items-center gap-2">
46                <s.icon className="size-4 text-brand-500" />
47                {s.title}
48              </div>
49              <ChevronDown className={`size-4 text-gray-400 transition-transform ${openSections[s.id] ? 'rotate-180' : ''}`} />
50            </button>
51            {openSections[s.id] && (
52              <div className="border-t border-gray-100 px-4 py-3 dark:border-white/5">
53                <p className="text-sm text-gray-600 dark:text-gray-400">{s.content}</p>
54              </div>
55            )}
56          </div>
57        ))}
58      </div>
59    </SectionCard>
60  );
61}