import * as React from "react"; import { cn } from "@/lib/utils"; /** * Timeline * * A compound component for rendering horizontal or vertical timelines in slides. * Useful for chronological events, process steps, roadmaps, or any ordered sequence. * * Responsibilities: * - Render items connected by a continuous line through their markers * - Support horizontal layout (converts to vertical on mobile) and vertical layout * - Support left-aligned and center (alternating) vertical layouts * - Accept custom markers (icons, numbers) or default filled dot * * Usage: * ```tsx * // Horizontal (default) — auto-converts to vertical on mobile * * Shipped v1 * }>Shipped v2 * * * // Always vertical, left-aligned * * Founded the company * * * // Vertical alternating sides * * Founded * First product * * ``` * * Notes: * - Horizontal timelines auto-convert to vertical left-aligned on screens below md (768px) * - orientation, align, index, isFirst, isLast are injected by Timeline via cloneElement * - Pass any ReactNode to the `marker` prop for custom icons or step numbers */ // ─── Marker ───────────────────────────────────────────────────────────────── function TimelineMarker({ children }: { children?: React.ReactNode }) { if (children) { return (

{children}

); } return (

); } // ─── Timeline.Item ────────────────────────────────────────────────────────── export interface TimelineItemProps { /** Date, step label, or any node shown near the marker */ label?: React.ReactNode; /** Custom marker content (icon, number). Defaults to a filled dot. */ marker?: React.ReactNode; className?: string; children?: React.ReactNode; /** Injected by Timeline via cloneElement — do not pass manually */ orientation?: "horizontal" | "vertical"; /** Injected by Timeline via cloneElement — do not pass manually */ align?: "left" | "center"; /** Injected by Timeline via cloneElement — do not pass manually */ index?: number; /** Injected by Timeline via cloneElement — do not pass manually */ isFirst?: boolean; /** Injected by Timeline via cloneElement — do not pass manually */ isLast?: boolean; } function TimelineItem({ label, marker, className, children, orientation = "horizontal", align = "left", index = 0, isFirst = false, isLast = false, }: TimelineItemProps) { // ── Vertical left-aligned ── if (orientation === "vertical" && align !== "center") { return (

{/* Left column: marker at top, line fills downward */}

{marker}

{/* Right column: label + content */}

{label &&

{label}

} {children && (

{children}

)}

); } // ── Vertical center (alternating) ── if (orientation === "vertical" && align === "center") { const isEven = index % 2 === 0; return (

{/* Left cell: content for even items, empty for odd */}

{isEven && label && (

{label}

)} {isEven && children && (

{children}

)}

{/* Center cell: connector always at the same horizontal position */}

{marker}

{/* Right cell: content for odd items, empty for even */}

{!isEven && label && (

{label}

)} {!isEven && children && (

{children}

)}

); } // ── Horizontal (default) — vertical on mobile, horizontal on desktop ── return (

{/* Mobile: left-aligned vertical */}

{marker}

{label &&

{label}

} {children && (

{children}

)}

{/* Desktop: horizontal */}

{/* Label above — fixed min-height keeps all markers on the same horizontal axis */}

{label && (

{label}

)}

{/* Connector row: left arm — marker — right arm */}

{marker}

{/* Content below */}

{children}

); } // ─── Timeline (root) ───────────────────────────────────────────────────────── export interface TimelineProps { /** Layout direction. "horizontal" converts to vertical on mobile. */ orientation?: "horizontal" | "vertical"; /** Vertical only — "left" keeps content on the right; "center" alternates sides. */ align?: "left" | "center"; className?: string; children?: React.ReactNode; } export function Timeline({ orientation = "horizontal", align = "left", className, children, }: TimelineProps) { const items = React.Children.toArray(children); const count = items.length; return (

{items.map((child, index) => { if (!React.isValidElement(child)) return child; return React.cloneElement(child as React.ReactElement, { key: index, orientation, align, index, isFirst: index === 0, isLast: index === count - 1, }); })}

); } Timeline.Item = TimelineItem;