Accordion Card

1// shadcn
2import {
3  Accordion,
4  AccordionContent,
5  AccordionItem,
6  AccordionTrigger
7} from "@/components/ui/accordion";
8import {
9  Card,
10  CardContent,
11  CardDescription,
12  CardHeader,
13  CardTitle
14} from "@/components/ui/card";
15
16// constants
17const items = [
18  {
19    value: "plans",
20    trigger: "What subscription plans do you offer?",
21    content:
22      "We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features."
23  },
24  {
25    value: "billing",
26    trigger: "How does billing work?",
27    content:
28      "Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment."
29  },
30  {
31    value: "cancel",
32    trigger: "How do I cancel my subscription?",
33    content:
34      "You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period."
35  }
36];
37
38//  ------------------------------ | ACCORDION CARD | ------------------------------  //
39
40export default function AccordionCard() {
41  return (
42    <Card className="w-full max-w-sm">
43      <CardHeader>
44        <CardTitle>Subscription & Billing</CardTitle>
45        <CardDescription>
46          Common questions about your account, plans, payments and
47          cancellations.
48        </CardDescription>
49      </CardHeader>
50      <CardContent>
51        <Accordion defaultValue={["plans"]}>
52          {items.map((item) => (
53            <AccordionItem key={item.value} value={item.value}>
54              <AccordionTrigger>{item.trigger}</AccordionTrigger>
55              <AccordionContent>{item.content}</AccordionContent>
56            </AccordionItem>
57          ))}
58        </Accordion>
59      </CardContent>
60    </Card>
61  );
62}