A minimalist, accessible accordion component that allows only a single panel to be open at a time. Ideal for FAQ sections and dense information displays.
"use client";
import React from "react";
import SingleOpenAccordion from "@/components/ui/single-open-accordion";
const items = [
{
id: "billing",
category: "Billing",
question: "When will I be charged?",
answer: "You will be charged at the beginning of each billing cycle. If you are on an annual plan, you will be billed once per year.",
},
{
id: "security",
category: "Security",
question: "Is my data secure?",
answer: "We use industry-standard encryption to protect your data both in transit and at rest. Your information is never shared with third parties without your explicit consent.",
},
{
id: "cancellation",
category: "Account",
question: "How do I cancel my subscription?",
answer: "You can cancel your subscription at any time from your account settings. Once cancelled, you will retain access to the platform until the end of your current billing period.",
},
];
export default function SingleOpenAccordionDemo() {
return (
<div className="flex w-full items-center justify-center p-4 md:p-8 min-h-[500px]">
<SingleOpenAccordion
title="Frequently asked questions"
description="Here are some common questions about our platform and services."
items={items}
defaultOpenId="security"
/>
</div>
);
}