"use client"; import { useState, useEffect } from "react"; import { AreaChart, Area, CartesianGrid, XAxis, YAxis } from "recharts"; import { LuHeartPulse } from "react-icons/lu"; import { ChartContainer } from "@/components/ui/chart"; interface HeartRateProps { /** Current heart rate in beats per minute (BPM) */ heartRate: number; /** Target heart rate goal (optional) */ goal?: number; /** Date label to display */ date?: string; /** Additional CSS classes to apply */ className?: string; } const HeartRate = ({ heartRate, date = "Today", className = "", }: HeartRateProps) => { const [currentBPM, setCurrentBPM] = useState(heartRate); const [chartData, setChartData] = useState< Array<{ time: number; bpm: number }> >([]); useEffect(() => { const generateHeartbeat = () => { const base = heartRate || 42; const variation = (Math.random() - 0.5) * (base * 0.05); const newBPM = Math.round(base + variation); return Math.max( Math.round(base * 0.9), Math.min(Math.round(base * 1.1), newBPM) ); }; const initialData = Array.from({ length: 30 }, (_, i) => ({ time: i, bpm: generateHeartbeat(), })); setChartData(initialData); setCurrentBPM(heartRate); const interval = setInterval(() => { const newBPM = generateHeartbeat(); setCurrentBPM(newBPM); setChartData((prev) => { const newData = [ ...prev.slice(1), { time: prev[prev.length - 1].time + 1, bpm: newBPM }, ]; return newData; }); }, 2000); return () => clearInterval(interval); }, [heartRate]); const chartConfig = { bpm: { label: "BPM", color: "var(--chart-1)", }, }; const statusColor = "#667cea"; return (

{date}

Live

{currentBPM}

BPM

); }; export { HeartRate };

Prop	Type	Default	Description
`heartRate*`	`number`	—	The base heart rate value in BPM. The component will animate around this value with ±5% variation.
`goal`	`number`	—	Optional target heart rate goal (for future use).
`date`	`string`	`Today`	The label displayed in the top left corner. Defaults to 'Today'.
`className`	`string`	—	Additional CSS classes to apply to the component container.

Heart Rate

Primary

Resting Heart Rate

Active Heart Rate

Props