Media Content Accordion

1import { RotateCcw, ShoppingCart, Truck } from "lucide-react";
2import {
3  Accordion,
4  AccordionContent,
5  AccordionItem,
6  AccordionTrigger,
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    icon: ShoppingCart,
15  },
16  {
17    title: "How long does shipping usually take?",
18    content:
19      "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.",
20    icon: Truck,
21  },
22  {
23    title: "What is your return policy?",
24    content:
25      "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.",
26    icon: RotateCcw,
27  },
28];
29 
30export default function AccordionMediaContentDemo() {
31  return (
32    <Accordion
33      className="my-4 w-full max-w-lg"
34      collapsible
35      defaultValue="item-0"
36      type="single"
37    >
38      {items.map(({ title, content, icon: Icon }, index) => (
39        <AccordionItem key={index} value={`item-${index}`}>
40          <AccordionTrigger>
41            <div className="flex items-start gap-3">
42              <Icon />
43              {title}
44            </div>
45          </AccordionTrigger>
46          <AccordionContent className="relative pl-9">
47            <div className="absolute top-0 bottom-3 left-3 w-px border-l border-dashed" />
48 
49            {content}
50            <div className="mt-4 aspect-18/9 w-full rounded-xl bg-muted" />
51          </AccordionContent>
52        </AccordionItem>
53      ))}
54    </Accordion>
55  );
56}