"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; interface TimelineItem { date?: string; description?: string; icon?: React.ReactNode; status?: "completed" | "active" | "upcoming"; title: string; } interface TimelineProps extends React.HTMLAttributes { items: TimelineItem[]; label?: string; } const statusConfig: Record< string, { dot: string; glow: string; line: string } > = { active: { dot: "bg-primary border-primary", glow: "shadow-[0_0_10px_var(--primary)]", line: "bg-primary/20", }, completed: { dot: "bg-primary border-primary/60", glow: "shadow-[0_0_6px_var(--primary)]", line: "bg-primary/40", }, upcoming: { dot: "bg-foreground/10 border-foreground/20", glow: "", line: "bg-foreground/10", }, }; export function Timeline({ items, label, className, ...props }: TimelineProps) { const [revealedIdx, setRevealedIdx] = React.useState(-1); React.useEffect(() => { let idx = 0; const interval = setInterval(() => { setRevealedIdx(idx); idx++; if (idx >= items.length) { clearInterval(interval); } }, 120); return () => clearInterval(interval); }, [items.length]); return (

{label ? (

{label}

) : null}

{items.map((item, i) => { const status = item.status || "upcoming"; const config = statusConfig[status]; return (

{/* Timeline line + dot */}

{item.icon ? ( {item.icon} ) : status === "completed" ? ( ) : null}

{i < items.length - 1 && (

)}

{/* Content */}

{item.title}

{item.date ? ( {item.date} ) : null} {status === "active" && ( CURRENT )}

{item.description ? (

{item.description}

) : null}

); })}

); }