Accordion

"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/registry/base/ui/accordion";

const items = [
  {
    value: "shipping",
    title: "How long does shipping take?",
    body: "Standard delivery takes 3-5 business days. Express shipping ensures next-day delivery for orders placed before 2pm.",
  },
  {
    value: "returns",
    title: "What is the return policy?",
    body: "Every purchase includes a 30-day return window. Items go back in their original condition; refunds land within 48 hours.",
  },
  {
    value: "warranty",
    title: "Is there a warranty?",
    body: "All products carry a two-year limited warranty covering manufacturing defects and hardware failures.",
  },
];

export default function Accordion01() {
  return (
    <Accordion
      className="flex w-full max-w-md flex-col gap-2"
      defaultValue={["shipping"]}
    >
      {items.map((item) => (
        <AccordionItem
          key={item.value}
          value={item.value}
          className="rounded-lg border px-4 last:border-b"
        >
          <AccordionTrigger>{item.title}</AccordionTrigger>
          <AccordionContent>{item.body}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

"use client";

import { Package, RotateCcw, ShieldCheck } from "lucide-react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/registry/base/ui/accordion";

const items = [
  {
    value: "shipping",
    icon: Package,
    title: "How long does shipping take?",
    body: "Standard delivery takes 3-5 business days. Express shipping ensures next-day delivery for orders placed before 2pm.",
  },
  {
    value: "returns",
    icon: RotateCcw,
    title: "What is the return policy?",
    body: "Every purchase includes a 30-day return window. Items go back in their original condition; refunds land within 48 hours.",
  },
  {
    value: "warranty",
    icon: ShieldCheck,
    title: "Is there a warranty?",
    body: "All products carry a two-year limited warranty covering manufacturing defects and hardware failures.",
  },
];

export default function Accordion02() {
  return (
    <Accordion className="w-full max-w-md" defaultValue={["shipping"]}>
      {items.map((item) => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionTrigger>
            <span className="flex items-center gap-2">
              <item.icon
                className="size-4 text-muted-foreground"
                aria-hidden="true"
              />
              {item.title}
            </span>
          </AccordionTrigger>
          <AccordionContent>{item.body}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/registry/base/ui/accordion";

const faqs = [
  {
    value: "trial",
    question: "Is there a free trial?",
    answer: "Every plan includes a 14-day trial, no credit card required. You can invite your whole team during the trial.",
  },
  {
    value: "billing",
    question: "Can I change plans later?",
    answer: "Yes. Upgrades apply immediately; downgrades take effect at the start of your next billing cycle.",
  },
  {
    value: "data",
    question: "What happens to my data if I cancel?",
    answer: "Your data stays available for 30 days after cancellation, so you can export everything or reactivate anytime.",
  },
  {
    value: "security",
    question: "How is my data secured?",
    answer: "All traffic is encrypted in transit and at rest. We run regular third-party audits and publish the results on our security page.",
  },
];

export default function Accordion03() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-6">
      <h3 className="text-lg font-semibold">Frequently asked questions</h3>
      <Accordion defaultValue={["trial"]}>
        {faqs.map((faq) => (
          <AccordionItem key={faq.value} value={faq.value}>
            <AccordionTrigger>{faq.question}</AccordionTrigger>
            <AccordionContent>{faq.answer}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
      <p className="text-sm text-muted-foreground">
        Still stuck?{" "}
        <a href="#" className="font-medium text-foreground underline underline-offset-4">
          Contact support
        </a>
        .
      </p>
    </div>
  );
}

"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/registry/base/ui/accordion";

const items = [
  {
    value: "email",
    title: "Email notifications",
    body: "Get a summary of activity in your workspace delivered every morning.",
  },
  {
    value: "sms",
    title: "SMS alerts",
    disabled: true,
    body: "Requires a verified phone number on a Pro plan or higher.",
  },
  {
    value: "push",
    title: "Push notifications",
    body: "Enable browser push to get notified the moment something changes.",
  },
];

export default function Accordion04() {
  return (
    <Accordion className="w-full max-w-md" defaultValue={["email"]}>
      {items.map((item) => (
        <AccordionItem
          key={item.value}
          value={item.value}
          disabled={item.disabled}
        >
          <AccordionTrigger>{item.title}</AccordionTrigger>
          <AccordionContent>{item.body}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}