Files
upstream-shadcn-ui/apps/v4/examples/base/accordion-card.tsx
upstream-mirror 1416db152c
All checks were successful
Release / Create Version PR or Publish Stable Release (push) Has been skipped
Release / Publish Prerelease to NPM (push) Has been skipped
Monitor Registries / Monitor registry health (push) Has been skipped
snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)
2026-09-15 22:44:43 +05:00

59 lines
1.8 KiB
TypeScript

import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/styles/base-nova/ui/accordion"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/styles/base-nova/ui/card"
const items = [
{
value: "plans",
trigger: "What subscription plans do you offer?",
content:
"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.",
},
{
value: "billing",
trigger: "How does billing work?",
content:
"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.",
},
{
value: "cancel",
trigger: "How do I cancel my subscription?",
content:
"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.",
},
]
export default function AccordionCard() {
return (
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle>Subscription & Billing</CardTitle>
<CardDescription>
Common questions about your account, plans, payments and
cancellations.
</CardDescription>
</CardHeader>
<CardContent>
<Accordion defaultValue={["plans"]}>
{items.map((item) => (
<AccordionItem key={item.value} value={item.value}>
<AccordionTrigger>{item.trigger}</AccordionTrigger>
<AccordionContent>{item.content}</AccordionContent>
</AccordionItem>
))}
</Accordion>
</CardContent>
</Card>
)
}