// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Timeline 01 * @description A vertical timeline with alternating events and dates. * Great for company history, product milestones, or event schedules. * * @slots timeline, timeline-container, timeline-header, timeline-badge, * timeline-heading, timeline-description, timeline-content, timeline-line, * timeline-event, timeline-date, timeline-node, timeline-card, * timeline-event-title, timeline-event-badge, timeline-event-description * @variant vertical * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Circle } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface TimelineEvent { /** Unique identifier */ id: string /** Event date or time period */ date: string /** Event title */ title: string /** Event description */ description: string /** Optional highlight badge */ badge?: string } interface Timeline01Props { /** Section badge text */ sectionBadge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Timeline events */ events?: TimelineEvent[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultEvents: TimelineEvent[] = [ { id: "event-1", date: "2024", title: "Series B Funding", description: "Raised $50M to expand our platform globally and triple our engineering team.", badge: "Latest", }, { id: "event-2", date: "2023", title: "1 Million Users", description: "Reached a major milestone with over 1 million active users on our platform.", }, { id: "event-3", date: "2022", title: "Product Launch", description: "Officially launched our product after 18 months of development and beta testing.", }, { id: "event-4", date: "2021", title: "Company Founded", description: "Started with a small team and a big vision to transform the industry.", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Timeline01({ sectionBadge = "Our Journey", heading = "Company milestones", description = "From humble beginnings to where we are today, here's how we got here.", events = defaultEvents, className, }: Timeline01Props) { return (

{/* Header */}

{sectionBadge}

{heading}

{description && (

{description}

)}

{/* Timeline */}

{/* Vertical Line */}

{/* Events */}

{events.map((event, index) => (

{/* Date (Desktop) */}

{event.date}

{/* Timeline Node */}

{/* Content */}

{/* Date (Mobile) */} {event.date}

{event.title}

{event.badge && ( {event.badge} )}

{event.description}

))}

) } export default Timeline01 export { Timeline01, type Timeline01Props, type TimelineEvent }