Timeline

Day headings, relative times and actors are handled for you. New items arrive behind a "show new" pill instead of shifting what the reader is looking at.

import { Timeline, toast } from '@andrewbehma/glass-ui';

Playground

Timeline.tsx

import { Timeline, toast } from '@andrewbehma/glass-ui';

function Example() {
  const now = Date.now();
  const hour = 3600 * 1000;
  const items = [
    { id: '1', at: new Date(now - 0.4 * hour), tone: 'ok', actor: { name: 'Mira Kovalenko' }, title: 'Deployed v0.28.0 to production' },
    { id: '2', at: new Date(now - 2 * hour), actor: { name: 'Tomás Ibarra' }, title: 'Commented on the Sheet spacing issue', meta: 'Inputs' },
    { id: '3', at: new Date(now - 5 * hour), tone: 'warn', title: 'Build took longer than usual', meta: '3m 12s' },
    { id: '4', at: new Date(now - 27 * hour), tone: 'danger', actor: { name: 'Ada Okafor' }, title: 'Rolled back v0.27.3' },
  ];
  return (
    <div className="w-full max-w-[30rem]">
      <Timeline
        items={items}
        hasMore
        onLoadMore={() => toast('Loading older events')}
        newCount={2}
        onShowNew={() => toast('Showing new events')}
      />
    </div>
  );
}