Accordion4

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/ui/accordion";
7import { Cog, Mail, Lightning, Users } from "@mynaui/icons-react";
8 
9interface AccordionData {
10  icon: React.ReactNode;
11  title: string;
12  content: string[];
13}
14 
15const accordionData: AccordionData[] = [
16  {
17    icon: <Lightning className="size-4 stroke-2 text-muted-foreground" />,
18    title: "Getting Started",
19    content: [
20      "Create your MynaUI account",
21      "Verify your email address",
22      "Complete your profile setup",
23      "Explore the dashboard",
24    ],
25  },
26  {
27    icon: <Users className="size-4 stroke-2 text-muted-foreground" />,
28    title: "User Management",
29    content: [
30      "Invite team members",
31      "Set user permissions",
32      "Create user groups",
33      "Manage access controls",
34    ],
35  },
36  {
37    icon: <Cog className="size-4 stroke-2 text-muted-foreground" />,
38    title: "Configuration",
39    content: [
40      "Configure project settings",
41      "Set up integrations",
42      "Customize appearance",
43      "Define workflow rules",
44    ],
45  },
46  {
47    icon: <Mail className="size-4 stroke-2 text-muted-foreground" />,
48    title: "Communication",
49    content: [
50      "Set up notification preferences",
51      "Configure email templates",
52      "Manage communication channels",
53      "Review message history",
54    ],
55  },
56];
57 
58export default function IconAccordion() {
59  return (
60    <div className="mx-auto w-full max-w-7xl p-4">
61      <Accordion type="single" collapsible className="w-full">
62        {accordionData.map((item, index) => (
63          <AccordionItem key={index} value={`item-${index}`}>
64            <AccordionTrigger>
65              <div className="flex items-center gap-2">
66                <span className="text-muted-foreground">{item.icon}</span>
67                {item.title}
68              </div>
69            </AccordionTrigger>
70            <AccordionContent>
71              <ul className="space-y-2 pl-7">
72                {item.content.map((step, stepIndex) => (
73                  <li key={stepIndex}>{step}</li>
74                ))}
75              </ul>
76            </AccordionContent>
77          </AccordionItem>
78        ))}
79      </Accordion>
80    </div>
81  );
82}