The steps of a running task

// apps/docs/examples/ui/trace.tsx'use client';
import {  CheckIcon,  CircleAlertIcon,  CircleDashedIcon,  FileTextIcon,  LoaderIcon,} from 'lucide-react';
import {  Trace,  TraceCollapsible,  TraceCollapsibleContent,  TraceCollapsibleTrigger,  TraceDescription,  TraceIcon,  TraceLine,  TraceTitle,} from '@workspace/active-ui/components/primitives/trace';
/** * The steps of a task as it runs, handed in by the application: done, * running, failed and pending, and a step that opens to show its details. * The trace runs nothing itself; the statuses here are fixed. */export default function TraceExample() {  return (    <Trace className="w-full max-w-md">      <TraceCollapsible defaultOpen>        <TraceCollapsibleTrigger>          <TraceLine>            <TraceIcon>              <FileTextIcon />            </TraceIcon>            <TraceTitle>Read 3 source files</TraceTitle>          </TraceLine>        </TraceCollapsibleTrigger>        <TraceCollapsibleContent>          participants.csv, schemes.csv, rates.csv        </TraceCollapsibleContent>      </TraceCollapsible>      <TraceLine>        <TraceIcon>          <CheckIcon />        </TraceIcon>        <TraceTitle>Checked 214 addresses</TraceTitle>        <TraceDescription>2 without a postal code</TraceDescription>      </TraceLine>      <TraceLine status="running">        <TraceIcon>          <LoaderIcon />        </TraceIcon>        <TraceTitle>Calculating the contributions</TraceTitle>      </TraceLine>      <TraceLine status="error">        <TraceIcon>          <CircleAlertIcon />        </TraceIcon>        <TraceTitle>Reading rates.csv failed</TraceTitle>        <TraceDescription>Column “rate” is missing.</TraceDescription>      </TraceLine>      <TraceLine status="pending">        <TraceIcon>          <CircleDashedIcon />        </TraceIcon>        <TraceTitle>Sending the statements</TraceTitle>      </TraceLine>    </Trace>  );}