Three concentric progress rings for move, exercise, and stand goals with a color-keyed legend.
The import and the props worth knowing about, in one place.
import { Health5 } from "@/components/beste/piece/health5";
<Health5
rings={[
{
"label": "Move",
"value": "420",
"goal": "600 kcal",
"pct": 70,
"text": "text-rose-500",
"stroke": "stroke-rose-500"
},
{
"label": "Exercise",
"value": "32",
"goal": "45 min",
"pct": 71,
"text": "text-emerald-500",
"stroke": "stroke-emerald-500"
},
{
"label": "Stand",
"value": "10",
"goal": "12 hr",
"pct": 83,
"text": "text-sky-500",
"stroke": "stroke-sky-500"
}
]}
bordered={false}
/>