// title: Deployment pipeline steps with status and detail per stage import { CheckCircle2Icon, CircleIcon, LoaderIcon, XCircleIcon, } from "lucide-react"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/default/ui/tooltip"; type StepStatus = "done" | "running" | "pending" | "failed"; type PipelineStep = { name: string; status: StepStatus; duration: string; detail: string; }; const steps: PipelineStep[] = [ { detail: "All 248 unit tests passed in 14 s.", duration: "14 s", name: "Test", status: "done", }, { detail: "TypeScript compiled without errors; bundle size 142 kB.", duration: "22 s", name: "Build", status: "done", }, { detail: "Docker image pushed to registry as v2.4.1.", duration: "31 s", name: "Publish", status: "done", }, { detail: "Rolling update in progress — 3 of 5 pods updated.", duration: "~45 s", name: "Deploy", status: "running", }, { detail: "Smoke tests will run once all pods are healthy.", duration: "—", name: "Verify", status: "pending", }, ]; const statusIcon: Record = { done: , failed: , pending: , running: , }; const statusLabel: Record = { done: "Completed", failed: "Failed", pending: "Waiting", running: "In progress", }; export function Pattern() { return (

{steps.map(({ name, status, duration, detail }, index) => (

{index > 0 && (

)} {statusIcon[status]} {name}

{name}

{statusLabel[status]}

Duration: {duration}

{detail}

))}

); }