Test progress card

"use client";
import * as React from "react";
import { TestProgressCard } from "@/components/ui/notchset/blocks/test-progress-card";

export default function TestProgressCardDemo() {
  /* results landing: the iron panel reaches Ready with a new id, so its prismatic edge sweeps once */
  const [ready, setReady] = React.useState(false);
  return (
    <div className="grid w-full max-w-[820px] grid-cols-2 gap-6 max-[700px]:grid-cols-1">
      <TestProgressCard name="Thyroid panel" lab="Northside Lab" step={5} summary="6 results in: 5 read cleanly, 1 to check." detail="drawn 23 Oct · TSH, free T4, free T3, TPO, Tg, rT3" action={{ label: "Review results", onClick: () => {} }} />
      <TestProgressCard
        name="Iron panel"
        lab="Northside Lab"
        step={ready ? 5 : 3}
        arrival={ready ? "iron-ready" : "iron-waiting"}
        summary={ready ? "3 results in: all read cleanly." : "Your sample reached the lab."}
        detail="drawn 25 Oct · ferritin, iron, TIBC"
        action={{ label: ready ? "Back to waiting" : "Results land", onClick: () => setReady((r) => !r) }}
      />
    </div>
  );
}