Event timeline

import { EventTimeline } from "@bosunkit/components/event-timeline";
import type { ReactElement } from "react";
import { LOG } from "./log-data";

export const description: string =
  "A night passage's log over two days, newest first, with a wind entry corrected after the gust was read.";

export default function Showcase(): ReactElement {
  return <EventTimeline events={LOG} timeZone="UTC" timeReference="UTC" label="Ship's log" />;
}

import { EventTimeline, type EventTimelineAction, type EventTimelineEvent } from "@bosunkit/components/event-timeline";
import { Copy, Pencil, Share2 } from "lucide-react";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
import { LOG } from "./log-data";

export const description: string =
  "Relative times beside each time, actions on hover or focus (correct, copy, and share in the menu), and chips that " +
  "filter the log by source and tag.";

const NOW: number = Date.UTC(2026, 9, 17, 8, 30);

const ACTIONS: EventTimelineAction[] = [
  { id: "correct", label: "Correct", icon: <Pencil /> },
  { id: "copy", label: "Copy", icon: <Copy /> },
  { id: "share", label: "Share", icon: <Share2 /> },
];

const EVENTS: EventTimelineEvent[] = LOG.map(
  (event: EventTimelineEvent): EventTimelineEvent => ({ ...event, actions: ACTIONS }),
);

export default function ActionsAndFilters(): ReactElement {
  const [last, setLast]: [string, Dispatch<SetStateAction<string>>] = useState<string>("nothing yet");
  return (
    <div style={{ display: "grid", gap: "var(--space-sm)" }}>
      <EventTimeline
        events={EVENTS}
        timeZone="UTC"
        timeReference="UTC"
        relative
        now={NOW}
        filterable
        onAction={(eventId: string, actionId: string): void => {
          setLast(`${actionId} on ${eventId}`);
        }}
      />
      <p style={{ margin: 0, color: "var(--text-dim)" }}>The page receives: {last}</p>
    </div>
  );
}

import { EventTimeline, type EventTimelineEvent } from "@bosunkit/components/event-timeline";
import type { ReactElement } from "react";

export const description: string =
  "The alerts of a night at anchor, each with its priority's shape, color and word, acknowledged and cleared.";

const NIGHT: number = Date.UTC(2026, 9, 16, 22, 30);
const MINUTE: number = 60_000;

const ALERTS: EventTimelineEvent[] = [
  {
    id: "drag",
    at: NIGHT,
    title: "Anchor drag: 38 m from the drop point",
    priority: "alarm",
    source: "Anchor watch",
    acknowledged: { at: NIGHT + 2 * MINUTE, by: "Ada" },
    cleared: { at: NIGHT + 20 * MINUTE },
  },
  {
    id: "wind",
    at: NIGHT - 40 * MINUTE,
    title: "Wind rising: 24 kn, gusts 31 kn",
    priority: "warning",
    source: "Weather",
    acknowledged: { at: NIGHT - 38 * MINUTE, by: "Ada" },
  },
  {
    id: "battery",
    at: NIGHT - 3 * 60 * MINUTE,
    title: "House battery at 48 %",
    priority: "caution",
    source: "Battery monitor",
    cleared: { at: NIGHT - 2 * 60 * MINUTE },
  },
];

export default function AlertHistory(): ReactElement {
  return <EventTimeline events={ALERTS} timeZone="UTC" timeReference="UTC" label="Alert history" groupBy="none" />;
}

import { EventTimeline } from "@bosunkit/components/event-timeline";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
import { LOG } from "./log-data";

export const description: string = "Entries as buttons in a side panel, oldest first; the selected one is marked current.";

export default function Selectable(): ReactElement {
  const [selected, setSelected]: [string, Dispatch<SetStateAction<string>>] = useState<string>("wind");
  return (
    <div style={{ maxInlineSize: "28rem" }}>
      <EventTimeline
        events={LOG}
        timeZone="UTC"
        timeReference="UTC"
        order="oldest"
        dense
        selectedId={selected}
        onSelect={setSelected}
      />
    </div>
  );
}

import { EventTimeline, type EventTimelineEvent } from "@bosunkit/components/event-timeline";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
import { LOG } from "./log-data";

export const description: string = "The two latest entries, and a button that loads the earlier ones from bosund.";

export default function Earlier(): ReactElement {
  const [events, setEvents]: [EventTimelineEvent[], Dispatch<SetStateAction<EventTimelineEvent[]>>] = useState<
    EventTimelineEvent[]
  >(
    LOG.slice(0, 2),
  );
  return (
    <EventTimeline
      events={events}
      timeZone="UTC"
      timeReference="UTC"
      hasEarlier={events.length < LOG.length}
      loadEarlierAction={(): Promise<void> =>
        new Promise<void>((resolve: () => void): void => {
          setTimeout((): void => {
            setEvents(LOG);
            resolve();
          }, 600);
        })
      }
    />
  );
}

import { EventTimeline } from "@bosunkit/components/event-timeline";
import type { ReactElement } from "react";

export const description: string = "A log with no entries: the timeline's empty state.";

export default function Empty(): ReactElement {
  return <EventTimeline events={[]} timeZone="UTC" timeReference="UTC" label="Ship's log" />;
}