Accordion

1import { Accordion, AccordionContent, AccordionItem } from "@/components/ui/accordion";
2import * as AccordionPrimitive from "@radix-ui/react-accordion";
3import { PlusIcon } from "lucide-react";
4 
5const items = [
6  {
7    id: "1",
8    title: "Product Information",
9    content:
10      "Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability."
11  },
12  {
13    id: "2",
14    title: "Shipping Details",
15    content:
16      "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."
17  },
18  {
19    id: "3",
20    title: "Return Policy",
21    content:
22      "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."
23  }
24];
25 
26export default function AccordionWithPlusIcon() {
27  return (
28    <Accordion type="single" className="w-full" defaultValue="1">
29      {items.map((item) => (
30        <AccordionItem value={item.id} key={item.id} className="py-2">
31          <AccordionPrimitive.Header className="flex">
32            <AccordionPrimitive.Trigger className="focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-2 text-left text-sm leading-6 font-semibold transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0">
33              {item.title}
34              <PlusIcon
35                size={16}
36                className="pointer-events-none shrink-0 opacity-60 transition-transform duration-200"
37                aria-hidden="true"
38              />
39            </AccordionPrimitive.Trigger>
40          </AccordionPrimitive.Header>
41          <AccordionContent className="text-muted-foreground pb-2">{item.content}</AccordionContent>
42        </AccordionItem>
43      ))}
44    </Accordion>
45  );
46}