Reason glyph

"use client";
import { ReasonGlyph, ReasonWord, type Glyph } from "@/components/ui/notchset/reason-glyph";

/* the five glyphs, each with the word it explains; then the inline pair as list rows use it */
const SET: { word: string; glyph: Glyph }[] = [
  { word: "Above usual", glyph: { kind: "arc", value: 61, low: 47, high: 55, min: 30, max: 75 } },
  { word: "Shorter than usual", glyph: { kind: "span", usual: [0.2, 0.8], span: [0.3, 0.7] } },
  { word: "Worth watching", glyph: { kind: "marks", marks: [{ label: "Temperature", at: 1.5 }, { label: "Resting heart rate", at: 1.3 }, { label: "HRV", at: 0.4 }] } },
  { word: "Drifting 40 min", glyph: { kind: "align", offset: 0.6 } },
  { word: "3 days in a row", glyph: { kind: "days", days: [false, false, null, false, true, true, true] } },
];

export default function ReasonGlyphDemo() {
  return (
    <div className="flex w-full max-w-[640px] flex-col gap-8">
      <div className="grid grid-cols-5 gap-4 max-[600px]:grid-cols-2">
        {SET.map((s) => (
          <figure key={s.word} className="m-0 flex flex-col gap-2">
            <span className="block h-9">
              <ReasonGlyph glyph={s.glyph} />
            </span>
            <figcaption className="text-[length:var(--ns-text-small)] text-[color-mix(in_oklab,var(--ns-signal)_var(--ns-tint-ink),var(--ns-ink))]">{s.word}</figcaption>
          </figure>
        ))}
      </div>
      <ul className="m-0 flex list-none flex-col p-0">
        {[
          ["Vitamin D", "Due", { kind: "span", usual: [0, 1], span: [0, 1.2] }],
          ["Bedtime", "Drifting", { kind: "align", offset: 0.55 }],
          ["LDL", "Out of range", { kind: "arc", value: 128, low: 0, high: 99, min: 40, max: 160 }],
        ].map(([name, word, glyph]) => (
          <li key={name as string} className="flex min-h-11 items-center justify-between border-0 border-b-[0.5px] border-[var(--ns-line)] text-[length:var(--ns-text-small)]">
            <span className="text-[var(--ns-ink)]">{name as string}</span>
            <ReasonWord word={word as string} glyph={glyph as Glyph} className="text-[var(--ns-ink-2)]" />
          </li>
        ))}
      </ul>
    </div>
  );
}