Accordion

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger
6} from "@/components/ui/accordion";
7 
8const items = [
9  {
10    id: "1",
11    title: "Product Information",
12    content:
13      "Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability."
14  },
15  {
16    id: "2",
17    title: "Shipping Details",
18    content:
19      "We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days, while express shipping ensures delivery within 1-2 business days."
20  },
21  {
22    id: "3",
23    title: "Return Policy",
24    content:
25      "We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition."
26  }
27];
28 
29export default function AccordionDemo() {
30  return (
31    <Accordion type="single" className="w-full" defaultValue="1">
32      {items.map((item) => (
33        <AccordionItem value={item.id} key={item.id} className="py-2">
34          <AccordionTrigger className="font-semibold">{item.title}</AccordionTrigger>
35          <AccordionContent className="text-muted-foreground pb-2">{item.content}</AccordionContent>
36        </AccordionItem>
37      ))}
38    </Accordion>
39  );
40}