Expand Icon Accordion

1import { Plus } from "lucide-react";
2import { Accordion as AccordionPrimitive } from "radix-ui";
3import {
4  Accordion,
5  AccordionContent,
6  AccordionItem,
7} from "@/registry/ui/accordion";
8 
9const items = [
10  {
11    title: "Can I change or cancel my order after placing it?",
12    content:
13      "Yes, you can change or cancel your order within 1 hour of placement by visiting your account page or contacting our support team. After that, orders may already be processed for shipping.",
14  },
15  {
16    title: "How long does shipping usually take?",
17    content:
18      "Domestic shipping typically takes 3-5 business days, while international orders may take up to 2-3 weeks depending on your location and customs processing times.",
19  },
20  {
21    title: "What is your return policy?",
22    content:
23      "We offer a 30-day return policy for most products. Items must be unused and in their original packaging. To initiate a return, simply contact our support with your order details.",
24  },
25];
26 
27export default function AccordionDefaultOpenDemo() {
28  return (
29    <Accordion
30      className="my-4 w-full max-w-lg"
31      collapsible
32      defaultValue="item-0"
33      type="single"
34    >
35      {items.map(({ title, content }, index) => (
36        <AccordionItem key={index} value={`item-${index}`}>
37          <AccordionPrimitive.Header className="flex">
38            <AccordionPrimitive.Trigger className="flex flex-1 items-center justify-between py-4 font-medium text-sm transition-all hover:underline [&[data-state=open]>svg]:rotate-45">
39              {title}
40              <Plus className="h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200" />
41            </AccordionPrimitive.Trigger>
42          </AccordionPrimitive.Header>
43          <AccordionContent>{content}</AccordionContent>
44        </AccordionItem>
45      ))}
46    </Accordion>
47  );
48}