Data display
Activity feed
Time-stamped events, newest first, with relative times.
import { ActivityFeed } from '@jsonresume/ui'Source(opens in a new tab)
Examples
Applied to Senior Engineer at Stripe
Generated a cover letter
Staff Frontend Engineer, Vercel
Your resume was viewed 14 times
Show code
activity-feed/recent.tsx
import { ActivityFeed } from '@jsonresume/ui';
import { Eye, FileText, Send } from 'lucide-react';
const now = new Date('2026-10-23T12:00:00Z');
export default function ActivityFeedRecent() {
return (
<ActivityFeed
now={now}
items={[
{
id: 1,
time: '2026-10-23T10:12:00Z',
title: 'Applied to Senior Engineer at Stripe',
icon: <Send size={14} />,
},
{
id: 2,
time: '2026-10-23T08:40:00Z',
title: 'Generated a cover letter',
description: 'Staff Frontend Engineer, Vercel',
icon: <FileText size={14} />,
},
{
id: 3,
time: '2026-10-21T16:00:00Z',
title: 'Your resume was viewed 14 times',
icon: <Eye size={14} />,
},
]}
/>
);
}Accessibility
- Each time is a time element with the exact date in its title.
Props
<ActivityFeed>
| Prop | Type | Default | Description |
|---|---|---|---|
| items required | ActivityItem[] | – | |
| label | string | Recent activity | |
| locale | string | – | |
| now | Date | new Date() | Reference time for "2 hours ago" (defaults to now). Pass it for stable server rendering. |