ActivityFeed
A quiet record of who did what, grouped by day.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { ActivityFeed, Button, Row, Stack } from '@weft-js/warp'import type { ActivityItem } from '@weft-js/warp'export function Project() { const items = state(ACTIVITY) const add = () => (items.value = [{ id: `new-${items.value.length}`, actor: 'Jun Tanaka', verb: 'deployed', object: 'edge-cache', time: 'Now', day: 'Today' }, ...items.value]) return ( <Stack gap="related"> <ActivityFeed items={items} live="live" title="Project activity" /> <Row><Button emphasis="outline" tone="neutral" size="sm" onClick={add}>Add a deploy</Button></Row> </Stack> )}const ACTIVITY: ActivityItem[] = [ { id: 'a1', actor: 'Priya Raman', verb: 'deployed', object: 'storefront', detail: 'to eu-west', time: '16:42', day: 'Today' }, { id: 'a2', actor: 'Lena Fischer', verb: 'started a build of', object: 'search-api', time: '16:10', day: 'Today' }, { id: 'a3', actor: 'Sam Okafor', verb: 'rolled back', object: 'mobile-bff', detail: 'to d-4801', time: '15:41', day: 'Today' }, { id: 'a4', actor: 'Tomás Oliveira', verb: 'deployed', object: 'checkout', time: '14:03', day: 'Today' }, { id: 'a5', actor: 'Mara Lindqvist', verb: 'changed the plan for', object: 'billing', time: '17:20', day: 'Yesterday' }, { id: 'a6', actor: 'Jun Tanaka', verb: 'paused', object: 'reports', time: '11:02', day: 'Yesterday' },]Installation
npm install @weft-js/warpUsage
tsx
import { ActivityFeed } from '@weft-js/warp'Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | ActivityItem[] | { value: ActivityItem[]; } | (() => ActivityItem[]) | — | A list, a state or a getter. |
live | LiveState | { value: LiveState; } | (() => LiveState) | — | Shows Live while the connection is up. |
title | string | 'Activity' | The heading. |
level | 2 | 3 | 4 | 6 | 5 | 3 |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="activity"] [data-part="eyebrow"]
eyebrow