import type { HTMLAttributes, ReactNode } from "react"; export type TimelineMilestone = { id: string; date: string; title: string; description?: ReactNode; href?: string; }; export type VerticalTimelineProps = Omit, "children"> & { items: TimelineMilestone[]; now: string; locale?: string; nowLabel?: string; plannedLabel?: string; dateFormat?: Intl.DateTimeFormatOptions; }; function toTime(value: string) { return Date.parse(/^\d{4}-\d{2}-\d{2}$/.test(value) ? value + "T00:00:00Z" : value); } const ring = "outline-none focus-visible:ring-2 focus-visible:ring-[#1F4E79] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-[#8CB6E0] dark:focus-visible:ring-offset-[#121A22]"; export function VerticalTimeline({ items, now, locale = "en-US", nowLabel = "Today", plannedLabel = "Planned", dateFormat = { year: "numeric", month: "short", day: "numeric" }, className = "", ...props }: VerticalTimelineProps) { const formatter = new Intl.DateTimeFormat(locale, { ...dateFormat, timeZone: "UTC" }); const nowTime = toTime(now); const sorted = [...items].sort((a, b) => toTime(a.date) - toTime(b.date)); const firstUpcoming = sorted.findIndex((item) => toTime(item.date) > nowTime); const markerIndex = firstUpcoming === -1 ? sorted.length : firstUpcoming; const nowMarker = (

{markerIndex < sorted.length ? (

); const rows: ReactNode[] = []; sorted.forEach((item, index) => { if (index === markerIndex) rows.push(nowMarker); const past = toTime(item.date) <= nowTime; const isLast = index === sorted.length - 1 && markerIndex !== sorted.length; rows.push(

{!isLast ? ( ) : null}

, ); }); if (markerIndex === sorted.length) rows.push(nowMarker); return (

{rows} ); }

Truck profile

EU data residency

Matrix v2

Isochrones

Offline tile packs

Truck profile

EU data residency

Matrix v2

Isochrones

Offline tile packs