Disabled Item Accordion

1import { RotateCcw, ShoppingCart, Truck } from "lucide-react";
2import { cn } from "@/lib/utils";
3import {
4  Accordion,
5  AccordionContent,
6  AccordionItem,
7  AccordionTrigger,
8} from "@/registry/ui/accordion";
9 
10const items = [
11  {
12    title: "Can I change or cancel my order after placing it?",
13    content:
14      "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.",
15    icon: ShoppingCart,
16  },
17  {
18    title: "How long does shipping usually take?",
19    content:
20      "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.",
21    icon: Truck,
22    disabled: true,
23  },
24  {
25    title: "What is your return policy?",
26    content:
27      "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.",
28    icon: RotateCcw,
29  },
30];
31 
32export default function AccordionItemDisabledDemo() {
33  return (
34    <Accordion
35      className="my-4 w-full max-w-lg"
36      collapsible
37      defaultValue="item-0"
38      type="single"
39    >
40      {items.map(({ title, content, icon: Icon, disabled }, index) => (
41        <AccordionItem key={index} value={`item-${index}`}>
42          <AccordionTrigger
43            className={cn({
44              "opacity-50": disabled,
45            })}
46            disabled={disabled}
47          >
48            <div className="flex items-start gap-3">
49              <Icon />
50              {title}
51            </div>
52          </AccordionTrigger>
53          <AccordionContent className="pl-9">{content}</AccordionContent>
54        </AccordionItem>
55      ))}
56    </Accordion>
57  );
58}