Accordions

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { ChevronRight, 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 AccordionsSection() {
29  const [singleOpen, setSingleOpen] = useState<number | null>(0);
30  const [multiOpen, setMultiOpen] = useState<Record<number, boolean>>({ 0: true });
31
32  const items = [
33    { title: 'What is mtverse admin?', body: 'mtverse admin is a comprehensive admin dashboard template built with Next.js, Tailwind CSS, and modern web technologies. It provides a rich set of UI components and dashboard layouts.' },
34    { title: 'How to customize the theme?', body: 'You can customize the theme by modifying the Tailwind CSS configuration and CSS variables. The design system supports light and dark modes with brand color customization.' },
35    { title: 'Is it production ready?', body: 'Yes, mtverse admin is built with production-grade code, TypeScript support, and follows best practices for performance, accessibility, and security.' },
36  ];
37
38  const toggleSingle = (i: number) => setSingleOpen((p) => (p === i ? null : i));
39  const toggleMulti = (i: number) => setMultiOpen((p) => ({ ...p, [i]: !p[i] }));
40
41  return (
42    <SectionCard title="Accordions" sourceSlug="/ui/source/ui-elements/accordions">
43      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
44        {/* Single Expand */}
45        <div>
46          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Single Expand</p>
47          <div className="space-y-2">
48            {items.map((item, i) => (
49              <div key={i} className="rounded-xl border border-gray-200 dark:border-white/5 overflow-hidden">
50                <button onClick={() => toggleSingle(i)} 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">
51                  {item.title}
52                  <ChevronRight className={`size-4 text-gray-400 transition-transform ${singleOpen === i ? 'rotate-90' : ''}`} />
53                </button>
54                {singleOpen === i && (
55                  <div className="border-t border-gray-100 px-4 py-3 dark:border-white/5">
56                    <p className="text-sm text-gray-600 dark:text-gray-400">{item.body}</p>
57                  </div>
58                )}
59              </div>
60            ))}
61          </div>
62        </div>
63
64        {/* Multiple Expand */}
65        <div>
66          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Multiple Expand</p>
67          <div className="space-y-2">
68            {items.map((item, i) => (
69              <div key={i} className="rounded-xl border border-gray-200 dark:border-white/5 overflow-hidden">
70                <button onClick={() => toggleMulti(i)} 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">
71                  {item.title}
72                  <ChevronRight className={`size-4 text-gray-400 transition-transform ${multiOpen[i] ? 'rotate-90' : ''}`} />
73                </button>
74                {multiOpen[i] && (
75                  <div className="border-t border-gray-100 px-4 py-3 dark:border-white/5">
76                    <p className="text-sm text-gray-600 dark:text-gray-400">{item.body}</p>
77                  </div>
78                )}
79              </div>
80            ))}
81          </div>
82        </div>
83      </div>
84    </SectionCard>
85  );
86}