Timeline
since v12.3.0Timeline — vertical activity feed. Consumer supplies pre-formatted timestamps;
no time computation here. Empty + loading states included.
Install
Add the package and import the component.
pnpm add @hey-mike/tungstenpnpm add @hey-mike/tungstenimport { Timeline } from '@hey-mike/tungsten';import { Timeline } from '@hey-mike/tungsten';Preview
Same fixtures used by the visual-regression suite.
Usage
apps/docs/app/snapshots/timeline/page.tsx
import { Timeline } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
const items = [
{ id: '1', title: 'Project created', time: '3h ago' },
{ id: '2', title: 'Invited 3 members', time: '2h ago' },
{ id: '3', title: 'First deployment', time: '1h ago' },
];
export default function TimelineSnapshot() {
return (
<VariantGrid
title="Timeline"
variants={[
{
label: 'feed',
node: <div className="w-64"><Timeline items={items} /></div>,
},
{
label: 'empty',
node: <div className="w-64"><Timeline items={[]} emptyLabel="No activity yet." /></div>,
},
]}
/>
);
}
import { Timeline } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
const items = [
{ id: '1', title: 'Project created', time: '3h ago' },
{ id: '2', title: 'Invited 3 members', time: '2h ago' },
{ id: '3', title: 'First deployment', time: '1h ago' },
];
export default function TimelineSnapshot() {
return (
<VariantGrid
title="Timeline"
variants={[
{
label: 'feed',
node: <div className="w-64"><Timeline items={items} /></div>,
},
{
label: 'empty',
node: <div className="w-64"><Timeline items={[]} emptyLabel="No activity yet." /></div>,
},
]}
/>
);
}
Props
Surface specific to <Timeline />.
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | TimelineItem[] | — | — |
| loading | boolean | false | — |
| emptyLabel | ReactNode | No activity yet. | — |