// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name FAQ 07 * @description An icon-based FAQ with visual category sections. * Each category has a distinct icon and expandable questions. * * @slots faq, faq-container, faq-header, faq-heading, faq-description, * faq-grid, faq-category, faq-category-header, faq-category-icon, * faq-category-title, faq-list, faq-item, faq-question, faq-answer, faq-icon * @variant icon-categories * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { ChevronDown, CreditCard, User, ShieldCheck, Rocket, type LucideIcon, } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface FaqItemConfig { /** Unique identifier for list key */ id: string /** Question text */ question: string /** Answer text */ answer: string } interface FaqCategoryConfig { /** Unique identifier for list key */ id: string /** Category display name */ name: string /** Category icon */ icon: LucideIcon /** FAQs in this category */ faqs: FaqItemConfig[] } interface Faq07Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of FAQ categories */ categories?: FaqCategoryConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_CATEGORIES: FaqCategoryConfig[] = [ { id: "cat-started", name: "Getting Started", icon: Rocket, faqs: [ { id: "faq-create", question: "How do I create an account?", answer: "Click 'Sign Up' and follow the simple 3-step process. You can use email or social login.", }, { id: "faq-free", question: "Is there a free plan?", answer: "Yes! Our free tier includes core features with generous limits. No credit card required.", }, ], }, { id: "cat-billing", name: "Billing & Payments", icon: CreditCard, faqs: [ { id: "faq-payment", question: "What payment methods do you accept?", answer: "We accept all major credit cards, PayPal, and bank transfers for annual plans.", }, { id: "faq-refund", question: "Can I get a refund?", answer: "Yes, we offer a 30-day money-back guarantee on all paid plans.", }, ], }, { id: "cat-account", name: "Account & Profile", icon: User, faqs: [ { id: "faq-password", question: "How do I reset my password?", answer: "Click 'Forgot Password' on the login page and check your email for reset instructions.", }, { id: "faq-username", question: "Can I change my username?", answer: "Yes, go to Account Settings > Profile to update your username and display name.", }, ], }, { id: "cat-security", name: "Security & Privacy", icon: ShieldCheck, faqs: [ { id: "faq-encrypted", question: "Is my data encrypted?", answer: "Yes, we use AES-256 encryption at rest and TLS 1.3 for all data in transit.", }, { id: "faq-sell", question: "Do you sell my data?", answer: "Never. Your data is yours. We don't sell, share, or monetize your personal information.", }, ], }, ] // ============================================================================ // COMPONENT // ============================================================================ function Faq07({ heading = "How can we help?", description = "Browse our FAQ categories to find quick answers.", categories = DEFAULT_CATEGORIES, className, idBase, }: Faq07Props) { const headingId = `${idBase ?? "faq-07"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Categories Grid */}

{categories.map((category) => { const CategoryIcon = category.icon return (

{/* Category Header */}

{category.name}

{/* FAQ List */}

{faq.question}: {faq.answer}

) })}

) } export default Faq07 export { Faq07, type Faq07Props, type FaqCategoryConfig, type FaqItemConfig }