Accordion5

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/ui/accordion";
7import { Input } from "@/ui/input";
8import { Mail, Map, User } from "@mynaui/icons-react";
9 
10interface FormSection {
11  id: string;
12  title: string;
13  icon: React.ReactNode;
14  children: React.ReactNode;
15  isComplete?: boolean;
16}
17 
18const sections: FormSection[] = [
19  {
20    id: "1",
21    icon: <User className="size-4 stroke-2 text-muted-foreground" />,
22    title: "Personal Information",
23    children: (
24      <div className="flex flex-col gap-2">
25        <Input type="text" placeholder="First Name" />
26        <Input type="text" placeholder="Last Name" />
27      </div>
28    ),
29  },
30  {
31    id: "2",
32    icon: <Mail className="size-4 stroke-2 text-muted-foreground" />,
33    title: "Contact Information",
34    children: (
35      <div className="flex flex-col gap-2">
36        <Input type="email" placeholder="Email" />
37        <Input type="tel" placeholder="Phone" />
38      </div>
39    ),
40  },
41  {
42    id: "3",
43    icon: <Map className="size-4 stroke-2 text-muted-foreground" />,
44    title: "Address Information",
45    children: (
46      <div className="flex flex-col gap-2">
47        <Input type="text" placeholder="Street" />
48        <Input type="text" placeholder="City" />
49        <Input type="text" placeholder="State" />
50        <Input type="text" placeholder="Zip" />
51      </div>
52    ),
53  },
54];
55 
56export default function FormSectionAccordion() {
57  return (
58    <Accordion type="single" collapsible className="w-full">
59      {sections.map((section) => (
60        <AccordionItem key={section.id} value={section.id}>
61          <AccordionTrigger className="group">
62            <div className="flex items-center gap-2">
63              {section.icon}
64              <span>{section.title}</span>
65              {section.isComplete && (
66                <span className="ml-2 text-sm text-green-500">✓</span>
67              )}
68            </div>
69          </AccordionTrigger>
70          <AccordionContent>{section.children}</AccordionContent>
71        </AccordionItem>
72      ))}
73    </Accordion>
74  );
75}