Timeline

pnpm dlx @hex-core/cli add timeline

import { Timeline } from "@/components/ui/timeline";

export function Example() {
  return (
    <Timeline
      aria-label="Release notes"
      events={[
        { id: "v1", title: "v1.0", timestamp: "Apr 24", icon: <span>⚡</span> },
        { id: "v2", title: "v1.1", timestamp: "Apr 27", icon: <span>🐛</span>, status: "warning" },
      ]}
    />
  );
}

import { useMemo } from "react";
import { Timeline, type TimelineEvent } from "@/components/ui/timeline";

interface DatedEvent extends TimelineEvent {
  occurredAt: string; // ISO date
}

const events: DatedEvent[] = [
  { id: "a", occurredAt: "2026-04-26T09:00:00Z", title: "Branch created", timestamp: "9:00 AM", status: "info" },
  { id: "b", occurredAt: "2026-04-26T14:20:00Z", title: "PR opened", timestamp: "2:20 PM", status: "info" },
  { id: "c", occurredAt: "2026-04-27T10:05:00Z", title: "Review approved", timestamp: "10:05 AM", status: "success" },
  { id: "d", occurredAt: "2026-04-27T11:42:00Z", title: "Merged to main", timestamp: "11:42 AM", status: "success" },
];

const dayLabel = new Intl.DateTimeFormat("en-US", { dateStyle: "full" });

function groupByDay(items: DatedEvent[]) {
  const buckets = new Map<string, DatedEvent[]>();
  for (const item of items) {
    const key = item.occurredAt.slice(0, 10);
    const bucket = buckets.get(key) ?? [];
    bucket.push(item);
    buckets.set(key, bucket);
  }
  return [...buckets.entries()].sort(([a], [b]) => a.localeCompare(b));
}

export function GroupedActivity() {
  const groups = useMemo(() => groupByDay(events), []);
  return (
    <div className="space-y-6">
      {groups.map(([day, dayEvents]) => (
        <section key={day} className="space-y-3">
          <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
            {dayLabel.format(new Date(day))}
          </h3>
          <Timeline aria-label={`Activity on ${day}`} events={dayEvents} />
        </section>
      ))}
    </div>
  );
}