Prism edge

"use client";
import * as React from "react";
import { Button } from "@/components/ui/notchset/button";
import { useArrival } from "@/lib/notchset/living";
import { PrismEdge } from "@/components/ui/notchset/prism-edge";

export default function PrismEdgeDemo() {
  /* a new id is new results: the edge sweeps once, then rests */
  const [n, setN] = React.useState(1);
  const [sweep, swept] = useArrival(`set-${n}`);
  return (
    <section className="relative isolate flex w-full max-w-[380px] flex-col gap-3 rounded-[var(--ns-radius-card)] bg-[var(--ns-glass)] p-6 [box-shadow:var(--ns-lit-edge),var(--ns-glass-shadow)] backdrop-blur-[var(--ns-glass-blur)]">
      <PrismEdge sweep={sweep} onSwept={swept} />
      <span className="text-[length:var(--ns-text-small)] text-[var(--ns-ink-2)]">Lipid panel · Northside Lab</span>
      <p className="m-0 font-[family-name:var(--ns-font-display)] text-[19px] leading-[1.3] text-[var(--ns-ink)]">5 results in: 4 read cleanly, 1 to check.</p>
      <Button className="self-start" onClick={() => setN((x) => x + 1)}>
        New results
      </Button>
    </section>
  );
}