// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Timeline 02 * @description A horizontal scrollable timeline with status indicators. * Great for product roadmaps, release history, or project phases. * * @slots timeline, timeline-container, timeline-header, timeline-badge, * timeline-heading, timeline-description, timeline-nav, timeline-scroll, * timeline-line, timeline-event, timeline-node, timeline-event-date, * timeline-event-title, timeline-event-description, timeline-event-badge * @variant horizontal * * @registryDependencies badge button * @dependencies lucide-react */ import * as React from "react" import { ChevronLeft, ChevronRight, Check, Clock, Circle } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ type EventStatus = "completed" | "current" | "upcoming" interface TimelineEvent { /** Unique identifier */ id: string /** Event date or version */ date: string /** Event title */ title: string /** Event description */ description: string /** Event status */ status: EventStatus } interface Timeline02Props { /** 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: "Q1 2024", title: "Foundation", description: "Core platform infrastructure and basic features", status: "completed", }, { id: "event-2", date: "Q2 2024", title: "Integrations", description: "Third-party integrations and API expansion", status: "completed", }, { id: "event-3", date: "Q3 2024", title: "AI Features", description: "Smart automation and AI-powered workflows", status: "current", }, { id: "event-4", date: "Q4 2024", title: "Enterprise", description: "Enterprise features, SSO, and advanced security", status: "upcoming", }, { id: "event-5", date: "Q1 2025", title: "Mobile Apps", description: "Native iOS and Android applications", status: "upcoming", }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const statusConfig = { completed: { icon: Check, bgColor: "bg-primary", textColor: "text-primary", label: "Completed", }, current: { icon: Clock, bgColor: "bg-primary", textColor: "text-primary", label: "In Progress", }, upcoming: { icon: Circle, bgColor: "bg-muted", textColor: "text-muted-foreground", label: "Upcoming", }, } as const // ============================================================================ // COMPONENT // ============================================================================ function Timeline02({ sectionBadge = "Roadmap", heading = "What we're building", description = "Our product roadmap for the upcoming quarters. See what's shipped and what's next.", events = defaultEvents, className, }: Timeline02Props) { const scrollRef = React.useRef(null) const scroll = (direction: "left" | "right") => { if (scrollRef.current) { const scrollAmount = 300 scrollRef.current.scrollBy({ left: direction === "left" ? -scrollAmount : scrollAmount, behavior: "smooth", }) } } return (

{/* Header */}

{sectionBadge}

{heading}

{description && (

{description}

)}

{/* Navigation Buttons */}

{/* Timeline */}

{/* Horizontal Line */}

{/* Events */}

{events.map((event) => { const config = statusConfig[event.status] const Icon = config.icon return (

{/* Node */}

{/* Content */}

{event.date}

{event.title}

{event.description}

{config.label}

) })}

) } export default Timeline02 export { Timeline02, type Timeline02Props, type TimelineEvent, type EventStatus }