Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.
The import and the props worth knowing about, in one place.
import { Dashboard15 } from "@/components/beste/piece/dashboard15";
<Dashboard15
surface="card"
bordered={false}
inverted={false}
rings={[
{
"label": "Move",
"value": 72,
"unit": "kcal",
"tone": "rose"
},
{
"label": "Exercise",
"value": 54,
"unit": "min",
"tone": "emerald"
},
{
"label": "Stand",
"value": 88,
"unit": "hr",
"tone": "sky"
}
]}
/>