HealthMetrics

healthmetrics-1779394643331.tsx

'use client'
import { useState } from 'react'

function Ring({ value, max, color, size = 80, label, sublabel }) {
  const R = size/2-8, C = 2*Math.PI*R
  const pct = Math.min(value/max, 1)
  return (
    <div style={{ textAlign:'center' }}>
      <svg width={size} height={size}>
        <circle cx={size/2} cy={size/2} r={R} fill="none" stroke="#f1f5f9" strokeWidth="8" />
        <circle cx={size/2} cy={size/2} r={R} fill="none" stroke={color} strokeWidth="8"
          strokeDasharray={pct*C + ' ' + C} strokeDashoffset={C/4}
          strokeLinecap="round" />
        <text x={size/2} y={size/2-4} textAnchor="middle" fontSize="14" fontWeight="800" fill="#1e293b">{label}</text>
        <text x={size/2} y={size/2+12} textAnchor="middle" fontSize="9" fill="#94a3b8">{sublabel}</text>
      </svg>
    </div>
  )
}

export default function HealthMetrics() {
  const [hr, setHr] = useState(72)
  useEffect(() => {
    const t = setInterval(() => setHr(h => 65 + Math.floor(Math.random()*20)), 2000)
    return () => clearInterval(t)
  }, [])
  return (
    <div style={{ background:'#fff', borderRadius:'20px', padding:'24px', maxWidth:'360px', boxShadow:'0 4px 20px rgba(0,0,0,0.08)' }}>
      <h3 style={{ margin:'0 0 20px', fontSize:'16px', fontWeight:700, color:'#1e293b' }}>Today's Health</h3>
      <div style={{ display:'flex', justifyContent:'space-around', marginBottom:'20px' }}>
        <Ring value={450} max={600} color="#ef4444" size={90} label="450" sublabel="Cal" />
        <Ring value={7800} max={10000} color="#f59e0b" size={90} label="7.8K" sublabel="Steps" />
        <Ring value={45} max={60} color="#2563eb" size={90} label="45m" sublabel="Active" />
      </div>
      <div style={{ background:'#fef2f2', borderRadius:'14px', padding:'16px', display:'flex', alignItems:'center', gap:'14px' }}>
        <div style={{ fontSize:'28px' }}>❤️</div>
        <div>
          <div style={{ fontSize:'12px', color:'#94a3b8', marginBottom:'2px' }}>Heart Rate</div>
          <div style={{ fontSize:'28px', fontWeight:900, color:'#ef4444' }}>{hr} <span style={{ fontSize:'14px', fontWeight:400, color:'#94a3b8' }}>BPM</span></div>
        </div>
        <div style={{ marginLeft:'auto', display:'flex', gap:'2px', alignItems:'flex-end' }}>
          {[30,50,35,60,45,55,40].map((h,i)=>(
            <div key={i} style={{ width:'4px', borderRadius:'2px', background:'#ef4444', height:h+'%', maxHeight:'40px', minHeight:'8px', opacity:0.6+i*0.06 }}/>
          ))}
        </div>
      </div>
    </div>
  )
}
import { useEffect } from 'react'

Component info

CategoryHealth

Frameworkreact

TierFREE

Copies0

About

Health metrics dashboard with rings, steps and heart rate

More from Health

'use client'
import { useState } from 'react'

const METRICS = [
  { label: 'Steps', value: 8432, goal: 10000, unit: 'steps', color: '#22c55e', icon: '👟' },
  { label: 'Calories', value: 1840, goal: 2200, unit: 'kcal', color: '#f59e0b', icon: '🔥' }

HealthDashboard

Health

'use client'
import { useState, useEffect } from 'react'

const EXERCISES = [
  { name:'Push-ups', sets:3, reps:15, rest:60, emoji:'💪' },
  { name:'Squats', sets:4, reps:12, rest:90, emoji:'🦵' },
  { name:'Plank', sets:3, reps:1, rest:60, emoji:'🏋

WorkoutCard

Health

'use client';
import { useEffect, useState } from 'react';

export default function HeatRingChart() {
  const [progress, setProgress] = useState([0, 0, 0]);
  const goals = [
    { label: 'Move', value: 78, goal: 100, color: '#ef4444' },
    { label:

HeatRingChart

Health