Highlight Active Item Accordion

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/registry/ui/accordion";
7 
8const items = [
9  {
10    title: "Can I change or cancel my order after placing it?",
11    content:
12      "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.",
13  },
14  {
15    title: "How long does shipping usually take?",
16    content:
17      "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.",
18  },
19  {
20    title: "What is your return policy?",
21    content:
22      "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.",
23  },
24];
25 
26export default function AccordionHighlightActiveItemDemo() {
27  return (
28    <Accordion
29      className="my-4 w-full max-w-lg"
30      collapsible
31      defaultValue="item-0"
32      type="single"
33    >
34      {items.map(({ title, content }, index) => (
35        <AccordionItem
36          className="data-[state=open]:border-indigo-600 data-[state=open]:border-b-2 dark:data-[state=open]:border-indigo-500"
37          key={index}
38          value={`item-${index}`}
39        >
40          <AccordionTrigger className="data-[state=open]:text-indigo-600 dark:data-[state=open]:text-indigo-500">
41            {title}
42          </AccordionTrigger>
43          <AccordionContent>{content}</AccordionContent>
44        </AccordionItem>
45      ))}
46    </Accordion>
47  );
48}