// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name FAQ 06 * @description A timeline-style FAQ with a vertical line connecting items. * Creates a visual journey through the questions with dot indicators. * * @slots faq, faq-container, faq-header, faq-heading, faq-description, * faq-timeline, faq-item, faq-dot, faq-line, faq-content, * faq-question, faq-answer * @variant timeline * * @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 Faq06Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of FAQ items */ faqs?: FaqItemConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_FAQS: FaqItemConfig[] = [ { id: "faq-started", question: "How do I get started?", answer: "Sign up for a free account, complete the onboarding wizard, and you're ready to go. The whole process takes less than 5 minutes.", }, { id: "faq-trial", question: "What happens during the free trial?", answer: "You get full access to all features for 14 days. No credit card required. At the end, choose a plan that fits your needs or your account simply becomes read-only.", }, { id: "faq-invite", question: "How do I invite my team?", answer: "Go to Team Settings and click 'Invite Members'. Enter their email addresses and they'll receive an invitation to join your workspace.", }, { id: "faq-migrate", question: "Can I migrate my existing data?", answer: "Yes! We support imports from all major platforms. Use our migration wizard or contact support for assisted migration on Enterprise plans.", }, { id: "faq-help", question: "What if I need help along the way?", answer: "Our support team is available 24/7 via chat and email. We also have comprehensive documentation, video tutorials, and a community forum.", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Faq06({ heading = "Your journey with us", description = "Common questions answered step by step.", faqs = DEFAULT_FAQS, className, idBase, }: Faq06Props) { const headingId = `${idBase ?? "faq-06"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Timeline */}

{faqs.map((faq, index) => (

{/* Timeline line */} {index < faqs.length - 1 && ( ))}

) } export default Faq06 export { Faq06, type Faq06Props, type FaqItemConfig }