Task Relay Card React component
Follow a task as it passes between bots and people: who has it now, what each one did, and the note they left for the next.
About the Task Relay Card component
Task Relay Card shows work moving between bots and people like a baton in a relay. The ring sits on whoever has the task now, and the line behind it shows how far it has come.
Each hand-off carries what was done and a note for the next runner, so nobody starts from nothing. If something went wrong, Take it back returns the task to the runner before.
When to use it
Use it for work that passes through several hands, such as content, approvals and support escalations.
If one person or bot does the whole task, a plain status card says the same with less.
Installation
Add the Task Relay Card component to your project with the shadcn CLI. It lands in components/task-relay-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/task-relay-cardProps
<TaskRelayCard /> accepts 7 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Update the refund policy" |
| legs In running order. | { id: string; runner: string; role: string; minutes: number; done: string; handover: string; items?: string[] }[] | DEFAULT_LEGS |
| defaultHolder Which leg holds the task at the start, from 0. | number | 1 |
| onPass | (from: RelayLeg, to: RelayLeg) => void | — |
| onTakeBack | (to: RelayLeg) => void | — |
| onFinish | () => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Update the refund policy"
- legs
In running order.
{ id: string; runner: string; role: string; minutes: number; done: string; handover: string; items?: string[] }[]Default: DEFAULT_LEGS - defaultHolder
Which leg holds the task at the start, from 0.
numberDefault: 1 - onPass(from: RelayLeg, to: RelayLeg) => void
- onTakeBack(to: RelayLeg) => void
- onFinish() => void
Task Relay Card FAQ
- What does the large number show?
- The time spent on every leg reached so far.
- Can bots and people be mixed?
- Yes. Each leg has a runner and a role, and the card treats them all the same.
- Can a task go backwards?
- Yes. Take it back returns it to the runner before.
- Does the card change height?
- No. Every leg shares one grid cell.
