1import ComponentPreviewer from "@/components/ComponentPreviewer";
2import {
3  AccordionRoot,
4  AccordionItem,
5  AccordionItemHeader,
6  AccordionItemTrigger,
7  AccordionItemContent,
8} from "./Accordion";
9import { Metadata } from "next";
10
11
12const accordionData = [
13  {
14    value: "item-1",
15    title: "What is Lorem Ipsum?",
16    content:
17      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s.",
18  },
19  {
20    value: "item-2",
21    title: "Why do we use it?",
22    content:
23      "It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
24  },
25  {
26    value: "item-3",
27    title: "Where can I get some?",
28    content:
29      "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.",
30  },
31  {
32    value: "item-4",
33    title: "Is Lorem Ipsum safe to use?",
34    content:
35      "Yes, Lorem Ipsum is safe to use as placeholder text for web and print design purposes.",
36  },
37  {
38    value: "item-5",
39    title: "What are the origins of Lorem Ipsum?",
40    content:
41      "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.",
42  },
43];
44const Page = () => {
45
46  return (
47    <>
48      <AccordionRoot
49        allowMultiple={false}
50        className="flex max-w-[540px] flex-col gap-y-4"
51      >
52        {accordionData.map((item) => (
53          <AccordionItem key={item.value} className="max-w-[1080px]">
54            <AccordionItemHeader>
55              <span className="flex-1">{item.title}</span>
56              <AccordionItemTrigger value={item.value} strokeColor="black" />
57            </AccordionItemHeader>
58            <AccordionItemContent value={item.value}>
59              <p className="">{item.content}</p>
60            </AccordionItemContent>
61          </AccordionItem>
62        ))}
63      </AccordionRoot>
64    </>
65  );
66};
67
68export default Page;