Baseline meter

"use client";
import * as React from "react";
import { BaselineMeter } from "@/components/ui/notchset/baseline-meter";
import { Button } from "@/components/ui/notchset/button";

export default function BaselineMeterDemo() {
  const [nights, setNights] = React.useState(9);
  return (
    <div className="flex max-w-[420px] flex-col gap-4">
      <BaselineMeter metric="HRV" unit="ms" nights={nights} band={{ low: 47, high: 55 }} value={61} />
      <Button size="sm" className="self-start" onClick={() => setNights((n) => (n >= 14 ? 9 : n + 1))}>
        {nights >= 14 ? "Start over" : "Add a night"}
      </Button>
    </div>
  );
}