Flutter Sleep Score Panel with Stage Breakdown

WDiv(
  className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-slate-900 shadow-xl dark:bg-slate-950',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center gap-2',
          children: [
            WDiv(
              className: 'flex items-center justify-center w-9 h-9 rounded-2xl bg-indigo-500/20 dark:bg-indigo-500/20',
              child: WIcon(
                Icons.dark_mode,
                className: 'text-indigo-300 text-base dark:text-indigo-300'
              ),
            ),
            WText(
              'Last night',
              className: 'text-sm font-semibold text-white'
            ),
          ],
        ),
        WText(
          'Wed, 06:42 AM',
          className: 'text-xs text-slate-400 dark:text-slate-500'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-col items-center gap-1',
      children: [
        WText(
          '84',
          className: 'text-6xl font-extrabold text-emerald-400 dark:text-emerald-400'
        ),
        WText(
          'SLEEP SCORE',
          className: 'text-xs font-semibold uppercase tracking-widest text-slate-400 dark:text-slate-500'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full h-3 rounded-full overflow-hidden',
      children: [
        WDiv(
          className: 'h-3 w-[26px] bg-slate-600 dark:bg-slate-600',
          child: WSpacer(
            className: 'w-[26px] h-3'
          )
        ),
        WDiv(
          className: 'h-3 w-[160px] bg-blue-400 dark:bg-blue-400',
          child: WSpacer(
            className: 'w-[160px] h-3'
          )
        ),
        WDiv(
          className: 'h-3 w-[84px] bg-indigo-500 dark:bg-indigo-500',
          child: WSpacer(
            className: 'w-[84px] h-3'
          )
        ),
        WDiv(
          className: 'h-3 w-[60px] bg-teal-400 dark:bg-teal-400',
          child: WSpacer(
            className: 'w-[60px] h-3'
          )
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-2 h-2 rounded-full bg-blue-400 dark:bg-blue-400',
              child: WSpacer(
                className: 'w-2 h-2'
              )
            ),
            WText(
              'Light 3h',
              className: 'text-xs text-slate-300 dark:text-slate-300'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-2 h-2 rounded-full bg-indigo-500 dark:bg-indigo-500',
              child: WSpacer(
                className: 'w-2 h-2'
              )
            ),
            WText(
              'Deep 1h 40m',
              className: 'text-xs text-slate-300 dark:text-slate-300'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1',
          children: [
            WDiv(
              className: 'w-2 h-2 rounded-full bg-teal-400 dark:bg-teal-400',
              child: WSpacer(
                className: 'w-2 h-2'
              )
            ),
            WText(
              'REM 1h 12m',
              className: 'text-xs text-slate-300 dark:text-slate-300'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center gap-3 w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-center gap-2 rounded-2xl px-4 py-3 w-[150px] bg-slate-800 dark:bg-slate-800',
          children: [
            WIcon(
              Icons.schedule,
              className: 'text-slate-300 text-base dark:text-slate-300'
            ),
            WText(
              '7h 12m total',
              className: 'text-sm font-semibold text-white'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center gap-2 rounded-2xl px-4 py-3 w-[150px] bg-emerald-500/15 dark:bg-emerald-500/15',
          children: [
            WIcon(
              Icons.check,
              className: 'text-emerald-400 text-base dark:text-emerald-400'
            ),
            WText(
              'Restful',
              className: 'text-sm font-bold text-emerald-400 dark:text-emerald-400'
            ),
          ],
        ),
      ],
    ),
  ],
)