// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Timeline 03 * @description A responsive timeline with milestone markers and status legend. * Great for product roadmaps, company history, or project phases. * * @slots timeline, timeline-container, timeline-header, timeline-heading, * timeline-description, timeline-content, timeline-line, timeline-grid, * timeline-milestone, timeline-dot, timeline-milestone-date, * timeline-milestone-title, timeline-milestone-description, timeline-legend * @variant milestones * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { CheckCircle2, Circle, Clock } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ type MilestoneStatus = "completed" | "current" | "upcoming" interface Milestone { /** Unique identifier */ id: string /** Milestone date */ date: string /** Milestone title */ title: string /** Milestone description */ description: string /** Milestone status */ status: MilestoneStatus } interface Timeline03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Milestones */ milestones?: Milestone[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultMilestones: Milestone[] = [ { id: "milestone-1", date: "Q1 2024", title: "Foundation", description: "Company founded and initial product development begins.", status: "completed", }, { id: "milestone-2", date: "Q2 2024", title: "Beta Launch", description: "Private beta released to early adopters for testing.", status: "completed", }, { id: "milestone-3", date: "Q3 2024", title: "Public Launch", description: "Official public launch with core features.", status: "current", }, { id: "milestone-4", date: "Q4 2024", title: "Enterprise", description: "Enterprise features and team collaboration tools.", status: "upcoming", }, { id: "milestone-5", date: "Q1 2025", title: "Global Expansion", description: "International expansion and localization.", status: "upcoming", }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const statusConfig = { completed: { icon: CheckCircle2, iconClass: "text-primary", dotClass: "bg-primary", lineClass: "bg-primary", }, current: { icon: Clock, iconClass: "text-primary", dotClass: "bg-primary animate-pulse", lineClass: "bg-border", }, upcoming: { icon: Circle, iconClass: "text-muted-foreground", dotClass: "bg-muted-foreground/30", lineClass: "bg-border", }, } as const // ============================================================================ // COMPONENT // ============================================================================ function Timeline03({ heading = "Product Roadmap", description = "See where we've been and where we're headed.", milestones = defaultMilestones, className, }: Timeline03Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Timeline */}

{/* Horizontal Line (Desktop) */}

{/* Milestones */}

{milestones.map((milestone, index) => { const config = statusConfig[milestone.status] return (

{/* Vertical Line (Mobile) */} {index !== milestones.length - 1 && (

)} {/* Content */}

{/* Dot */}

{/* Text */}

{milestone.date}

{milestone.title}

{milestone.description}

) })}

{/* Legend */}

Completed

In Progress

Upcoming

) } export default Timeline03 export { Timeline03, type Timeline03Props, type Milestone, type MilestoneStatus }