Reading trio

"use client";
import { ReadingTrio } from "@/components/ui/notchset/blocks/reading-trio";

const hm = (h: number) => `${Math.floor(h)} h ${String(Math.round((h % 1) * 60)).padStart(2, "0")}`;

export default function ReadingTrioDemo() {
  return (
    <div className="w-full max-w-[1040px]">
      <ReadingTrio
        label="Last night's readings"
        readings={[
          { id: "hrv", title: "HRV", value: 61, text: "61", unit: "ms", standing: { tone: "ok", word: "Above your usual" }, usual: { low: 47, high: 55, source: "Your last 21 nights" } },
          { id: "rhr", title: "Resting heart rate", value: 55, text: "55", unit: "bpm", standing: { tone: "neutral", word: "At your usual" }, usual: { low: 55, high: 58, source: "Your last 21 nights" } },
          { id: "sleep", title: "Sleep", value: 6.95, text: hm(6.95), format: hm, standing: { tone: "neutral", word: "At your usual" }, usual: { low: 6.6, high: 7.2, source: "Your last 21 nights" } },
        ]}
      />
    </div>
  );
}