A horizontal chart that shows several workers on one shared time axis, each row a lane with colored segments for the stretches of work and their outcome.
import Lanes from "@/components/ui/lanes";
export default function LanesDemo() {
return (
<div className="w-full max-w-xl bg-background p-6 text-foreground">
<Lanes
label="The workers of run 4127"
lanes={[
{
id: "fetch",
label: "fetch",
spans: [
{ label: "reading files", start: 0, end: 1200, tone: "ok" },
{ label: "parsing", start: 1200, end: 1800, tone: "ok" },
],
},
{
id: "build",
label: "build",
spans: [
{ label: "compiling", start: 600, end: 3400, tone: "running" },
],
},
{
id: "test",
label: "test",
spans: [
{ label: "unit tests", start: 3400, end: 4100, tone: "ok" },
{ label: "e2e tests", start: 4100, end: 5200, tone: "warn" },
],
},
{
id: "deploy",
label: "deploy",
spans: [{ label: "upload", start: 5200, end: 5600, tone: "error" }],
},
]}
/>
</div>
);
}