// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Timeline 07 * @description Horizontal timeline with milestone markers. * Perfect for roadmaps, project phases, or company history. * * @slots timeline, timeline-container, timeline-header, timeline-heading, * timeline-description, timeline-track, timeline-line, timeline-items, * timeline-item, timeline-marker, timeline-content, timeline-date, timeline-title * @variant horizontal * * @registryDependencies * @dependencies */ import * as React from "react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface TimelineItem { id: string date: string title: string description: string active?: boolean } interface Timeline07Props { heading?: string description?: string items?: TimelineItem[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: TimelineItem[] = [ { id: "item-1", date: "Q1 2024", title: "Research", description: "User research and market analysis", active: true }, { id: "item-2", date: "Q2 2024", title: "Design", description: "UI/UX design and prototyping", active: true }, { id: "item-3", date: "Q3 2024", title: "Development", description: "Core platform development", active: true }, { id: "item-4", date: "Q4 2024", title: "Beta Launch", description: "Limited release and testing" }, { id: "item-5", date: "Q1 2025", title: "Public Launch", description: "Full public availability" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Timeline07({ heading = "Product Roadmap", description = "Our journey from concept to launch.", items = defaultItems, className, idBase = "timeline-07", }: Timeline07Props) { const headingId = `${idBase}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Timeline Track */}

{/* Horizontal Line */}

{/* Items */}

{items.map((item, index) => (

{/* Marker */}

{index + 1}

{/* Content */}

{item.date}

{item.title}

{item.description}

))}

) } export default Timeline07 export { Timeline07, type Timeline07Props }