Overnight sleep card with the total time, a stacked stage bar, and a four-column stage breakdown.
The import and the props worth knowing about, in one place.
import { Health7 } from "@/components/beste/piece/health7";
<Health7
totalHours="7h 41m"
stages={[
{
"label": "Awake",
"minutes": 18,
"class": "bg-rose-400",
"text": "text-rose-500"
},
{
"label": "Light",
"minutes": 240,
"class": "bg-sky-400",
"text": "text-sky-500"
},
{
"label": "Deep",
"minutes": 95,
"class": "bg-indigo-500",
"text": "text-indigo-500"
},
{
"label": "REM",
"minutes": 108,
"class": "bg-violet-500",
"text": "text-violet-500"
}
]}
label="Sleep"
tone="primary"
bordered={false}
/>