// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name FAQ 04 * @description A grid-based FAQ layout with cards displayed in columns. * Great for showing many FAQs at once without overwhelming vertical scroll. * * @slots faq, faq-container, faq-header, faq-heading, faq-description, * faq-grid, faq-card, faq-question, faq-answer * @variant grid-cards * * @registryDependencies * @dependencies */ import * as React from "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 Faq04Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of FAQ items */ faqs?: FaqItemConfig[] /** Number of columns (2 or 3) */ columns?: 2 | 3 /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_FAQS: FaqItemConfig[] = [ { 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-cancel", question: "Can I cancel my subscription?", answer: "Yes, cancel anytime from your account settings. Access continues until the billing period ends.", }, { id: "faq-trial", question: "Do you offer a free trial?", answer: "Yes, we offer a 14-day free trial on all plans with no credit card required.", }, { id: "faq-support", question: "How do I get support?", answer: "We offer 24/7 support through email, live chat, and our comprehensive help center.", }, { id: "faq-security", question: "Is my data secure?", answer: "Yes, we use industry-standard AES-256 encryption for all data at rest and in transit.", }, { id: "faq-export", question: "Can I export my data?", answer: "Yes, export your data anytime in CSV, JSON, or Excel format from Settings.", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Faq04({ heading = "Frequently asked questions", description = "Find quick answers to common questions about our platform.", faqs = DEFAULT_FAQS, columns = 2, className, idBase, }: Faq04Props) { const headingId = `${idBase ?? "faq-04"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* FAQ Grid */}

{faqs.map((faq) => (

{faq.question}

{faq.answer}

))}

) } export default Faq04 export { Faq04, type Faq04Props, type FaqItemConfig }