"use client"; import { Activity } from "lucide-react"; import { cn } from "@/lib/utils"; type Tone = | "neutral" | "primary" | "foreground" | "sky" | "emerald" | "violet" | "amber" | "rose"; type BPStatus = "normal" | "elevated" | "high" | "low"; interface Health2Props { systolic?: number; diastolic?: number; status?: BPStatus; measured?: string; label?: string; tone?: Tone; className?: string; } const iconClasses: Record = { neutral: "bg-muted text-foreground", primary: "bg-primary text-primary-foreground", foreground: "bg-foreground text-background", sky: "bg-sky-500 text-white", emerald: "bg-emerald-500 text-white", violet: "bg-violet-500 text-white", amber: "bg-amber-500 text-white", rose: "bg-rose-500 text-white", }; const statusConfig: Record< BPStatus, { label: string; pill: string; dot: string } > = { normal: { label: "Normal", pill: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300", dot: "bg-emerald-500", }, elevated: { label: "Elevated", pill: "bg-amber-500/15 text-amber-700 dark:text-amber-300", dot: "bg-amber-500", }, high: { label: "Stage 2 high", pill: "bg-rose-500/15 text-rose-700 dark:text-rose-300", dot: "bg-rose-500", }, low: { label: "Low", pill: "bg-sky-500/15 text-sky-700 dark:text-sky-300", dot: "bg-sky-500", }, }; export const health2Demo: Health2Props = { systolic: 118, diastolic: 76, status: "normal", measured: "Measured at 08:42", label: "Blood pressure", tone: "sky", }; export function Health2({ systolic = 0, diastolic = 0, status = "normal", measured, label = "Blood pressure", tone = "sky", className, }: Health2Props) { const config = statusConfig[status]; return (

{label}

{systolic} / {diastolic} mmHg

{measured && ( {measured} )}

); }