import ReactMarkdown from 'react-markdown'; import { VerticalTimelineElement } from 'react-vertical-timeline-component'; import type { TimelineBody, TimelineItem, TitleSegment } from '../api/client'; import { colorFor, iconFor } from '../lib/icon'; interface Props { item: TimelineItem; } export function TimelineEntry({ item }: Props) { const Icon = iconFor(item.icon); const date = formatDate(item.occurred_at); return ( } >

{renderSegments(item.title)}

{item.subtitle && (
{renderSegments(item.subtitle)}
)} {item.body && } ); } function Body({ body }: { body: TimelineBody }) { switch (body.kind) { case 'markdown': return {body.text}; case 'commits': return ( ); case 'links': return ( ); } } function renderSegments(segments: TitleSegment[]) { return segments.map((seg, i) => renderSegment(seg, i)); } function renderSegment(seg: TitleSegment, i: number) { if (seg.kind === 'link') { return ( {seg.text} ); } return {seg.text}; } function formatDate(iso: string): string { const d = new Date(iso); const date = d .toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', }) .toLowerCase(); const time = d .toLocaleTimeString('en-GB', { timeZoneName: 'short' }) .toLowerCase(); return `${date} — ${time}`; }