Task Rows

Usage

import { TaskRows } from '@wdzyi/ui';

<TaskRows
  tasks={[
    { id: 'export', label: 'Export screens', meta: '38 views', status: 'done' },
    { id: 'build', label: 'Build the walkthrough', status: 'running', progress: 52 },
    { id: 'email', label: 'Draft the email', status: 'failed' },
  ]}
  onRetry={(id) => retry(id)}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

tasksTask[]

Each has an id, a label, a meta, a status, which is queued, running, failed or done, its progress from 0 to 100 while it runs, and details for when it opens.

onRetry(id: string) => void

Shows Retry beside a failed task.

Notes

• The badge’s edge is the progress bar, drawn clockwise from the top left, and it eases to each new value over 700ms.
• In the demo, work moves as it really does, quick in places and stalling in others. The walkthrough takes about nine seconds, and the email starts beside it, fails, and tries again by itself 2.7 seconds later if nobody presses Retry.
• The word for its state morphs from one to the next, with Morph Text. The meta hides when the list is under 380px wide, so the label keeps its room.
• Each row is one button, named with its state and progress, so a screen reader gets all of it at once.