// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name FAQ 01 * @description An accordion-style FAQ section with expandable questions. * Uses native details/summary for accessibility without JavaScript. * * @slots faq, faq-container, faq-header, faq-heading, faq-description, * faq-list, faq-item, faq-question, faq-answer * @variant accordion * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { ChevronDown } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface FaqItem { /** Unique identifier for list keys */ id: string /** Question text */ question: string /** Answer text */ answer: string } interface Faq01Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of FAQ items */ faqs?: FaqItem[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultFaqs: FaqItem[] = [ { id: "payment-methods", question: "What payment methods do you accept?", answer: "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual plans. All payments are processed securely through our payment provider.", }, { id: "cancel-subscription", question: "Can I cancel my subscription at any time?", answer: "Yes, you can cancel your subscription at any time from your account settings. Your access will continue until the end of your current billing period.", }, { id: "free-trial", question: "Do you offer a free trial?", answer: "Yes, we offer a 14-day free trial on all plans. No credit card required to start. You'll have full access to all features during the trial period.", }, { id: "support", question: "How do I get support?", answer: "We offer 24/7 support through our help center, email, and live chat. Pro and Enterprise customers also get access to priority support with faster response times.", }, { id: "change-plan", question: "Can I upgrade or downgrade my plan?", answer: "Absolutely! You can change your plan at any time. When upgrading, you'll be charged the prorated difference. When downgrading, the new rate applies at your next billing cycle.", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Faq01({ heading = "Frequently asked questions", description = "Have a different question? Contact our support team.", faqs = defaultFaqs, className, }: Faq01Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* FAQ List */}

{faq.question}: {faq.answer}

) } export default Faq01 export { Faq01, type Faq01Props, type FaqItem }