Task

Un paso plegable con estado, para mostrar qué hizo un agente y qué archivos tocó.

Read 58 components across two families

Matched the request tobutton.tsxandfield.tsx

Wrote the demo and regenerated the registry

1'use client';
2
3import { Task } from '@/components/ui/task';
4
5export function Default() {
6  return (
7    <div className="w-full max-w-md">
8      <Task defaultOpen>
9        <Task.Trigger title="Scanned the component registry" status="complete" />
10        <Task.Content>
11          <Task.Item>Read 58 components across two families</Task.Item>
12          <Task.Item>
13            Matched the request to
14            <Task.File>button.tsx</Task.File>
15            and
16            <Task.File>field.tsx</Task.File>
17          </Task.Item>
18          <Task.Item>Wrote the demo and regenerated the registry</Task.Item>
19        </Task.Content>
20      </Task>
21    </div>
22  );
23}

Instalación

pnpm dlx nachui add task

Anatomía

1import { Task } from '@/components/ui/task';

1<Task defaultOpen>
2  <Task.Trigger title="Recorrí el registro de componentes" status="complete" />
3  <Task.Content>
4    <Task.Item>Leí 58 componentes en dos familias</Task.Item>
5    <Task.Item>
6      Relacioné el pedido con <Task.File>button.tsx</Task.File>
7    </Task.Item>
8  </Task.Content>
9</Task>

Una tarea arranca abierta, porque lo interesante de la corrida de un agente suele ser el paso en el que está. Pon defaultOpen={false} en las que ya terminaron.

Composición

Usa la siguiente composición para construir un Task:

Task
├── Task.Trigger
└── Task.Content
    └── Task.Item
        └── Task.File

Estados

status define el icono y su color: pending espera, active gira, complete tilda y error marca el problema. Apilá varias tareas y la corrida entera se lee de un vistazo.

Writingprompt-input.tsx

2 errors in the generated registry

1'use client';
2
3import { Task } from '@/components/ui/task';
4
5export function Statuses() {
6  return (
7    <div className="flex w-full max-w-md flex-col gap-4">
8      <Task defaultOpen={false}>
9        <Task.Trigger title="Read the docs" status="complete" />
10        <Task.Content>
11          <Task.Item>Fetched 12 pages from llms.txt</Task.Item>
12        </Task.Content>
13      </Task>
14      <Task defaultOpen>
15        <Task.Trigger title="Generating the component" status="active" />
16        <Task.Content>
17          <Task.Item>
18            Writing
19            <Task.File>prompt-input.tsx</Task.File>
20          </Task.Item>
21        </Task.Content>
22      </Task>
23      <Task defaultOpen={false}>
24        <Task.Trigger title="Run the test suite" status="pending" />
25        <Task.Content>
26          <Task.Item>Waiting for the previous step</Task.Item>
27        </Task.Content>
28      </Task>
29      <Task defaultOpen>
30        <Task.Trigger title="Type check" status="error" />
31        <Task.Content>
32          <Task.Item>2 errors in the generated registry</Task.Item>
33        </Task.Content>
34      </Task>
35    </div>
36  );
37}

Referencia de API

Task

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`true`	Estado abierto cuando no se controla
`open`	`boolean`	-	Estado abierto controlado
`onOpenChange`	`(open: boolean) => void`	-	Se llama al cambiar el estado
`className`	`string`	-	Clases CSS adicionales

Task.Trigger

Prop	Type	Default	Description
`title`	`string`	-	Etiqueta del paso
`status`	`'pending' \| 'active' \| 'complete' \| 'error'`	`'complete'`	Icono y color del indicador
`children`	`ReactNode`	-	Reemplaza el título si se pasa
`className`	`string`	-	Clases CSS adicionales

Task.Content

Prop	Type	Default	Description
`className`	`string`	-	Clases CSS adicionales

Task.Item

Prop	Type	Default	Description
`className`	`string`	-	Clases CSS adicionales

Task.File

Prop	Type	Default	Description
`className`	`string`	-	Clases CSS adicionales

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorSuggestion

SiguienteLogin