"use client"; import { cn } from "@/lib/utils"; type Tone = | "neutral" | "primary" | "foreground" | "sky" | "emerald" | "violet" | "amber" | "rose"; interface Health8Props { spo2?: number; pulse?: number; timestamp?: string; label?: string; statusLabel?: string; tone?: Tone; className?: string; } const ringClasses: Record = { neutral: "text-foreground", primary: "text-primary", foreground: "text-foreground", sky: "text-sky-500", emerald: "text-emerald-500", violet: "text-violet-500", amber: "text-amber-500", rose: "text-rose-500", }; const statusClasses: Record = { neutral: "text-foreground", primary: "text-primary", foreground: "text-foreground", sky: "text-sky-700 dark:text-sky-300", emerald: "text-emerald-700 dark:text-emerald-300", violet: "text-violet-700 dark:text-violet-300", amber: "text-amber-700 dark:text-amber-300", rose: "text-rose-700 dark:text-rose-300", }; export const health8Demo: Health8Props = { spo2: 98, pulse: 68, timestamp: "Measured just now", label: "SpO₂", statusLabel: "Normal range", tone: "emerald", }; export function Health8({ spo2 = 0, pulse = 0, timestamp, label = "SpO₂", statusLabel = "Normal range", tone = "emerald", className, }: Health8Props) { const circumference = 2 * Math.PI * 32; const dash = (spo2 / 100) * circumference; return (

{spo2} %

{label} {statusLabel} Pulse {pulse} bpm {timestamp && ( {timestamp} )}

); }