// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name FAQ 03 * @description A tabbed FAQ section with category filters. * Users can filter FAQs by category for better navigation. * * @slots faq, faq-container, faq-header, faq-heading, faq-description, * faq-tabs, faq-tab, faq-list, faq-item, faq-question, faq-answer * @variant tabbed * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { ChevronDown } from "lucide-react" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface FaqItem { /** Unique identifier */ id: string /** Question text */ question: string /** Answer text */ answer: string /** Category for filtering */ category: string } interface Faq03Props { /** 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: "faq-1", 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.", category: "Billing", }, { id: "faq-2", 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 continues until the end of your billing period.", category: "Billing", }, { id: "faq-3", question: "Do you offer refunds?", answer: "We offer a 30-day money-back guarantee on all plans. Contact support within 30 days for a full refund.", category: "Billing", }, { id: "faq-4", question: "How do I reset my password?", answer: "Click 'Forgot Password' on the login page, enter your email, and follow the instructions sent to your inbox.", category: "Account", }, { id: "faq-5", question: "How do I change my email address?", answer: "Go to Account Settings, click on your email address, and enter your new email. You'll need to verify the new address.", category: "Account", }, { id: "faq-6", question: "How do I get support?", answer: "We offer 24/7 support through our help center, email, and live chat. Pro customers get priority support.", category: "Support", }, { id: "faq-7", question: "What are your support hours?", answer: "Our support team is available 24/7 for critical issues. General inquiries are handled during business hours (9 AM - 6 PM EST).", category: "Support", }, { id: "faq-8", question: "What features are included in each plan?", answer: "Each plan includes different features. Visit our pricing page for a detailed comparison of all plan features.", category: "Features", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Faq03({ heading = "Frequently asked questions", description = "Find answers to common questions about our product.", faqs = defaultFaqs, className, }: Faq03Props) { // Extract unique categories const categories = React.useMemo(() => { const cats = Array.from(new Set(faqs.map((faq) => faq.category))) return ["All", ...cats] }, [faqs]) const [activeCategory, setActiveCategory] = React.useState("All") // Filter FAQs by category const filteredFaqs = React.useMemo(() => { if (activeCategory === "All") return faqs return faqs.filter((faq) => faq.category === activeCategory) }, [faqs, activeCategory]) return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Category Tabs */}

{categories.map((category) => ( ))}

{/* FAQ List */}

{faq.question}: {faq.answer}

{filteredFaqs.length === 0 && (

No FAQs found for this category.

)}

) } export default Faq03 export { Faq03, type Faq03Props, type FaqItem }