Flutter Air Quality Index Panel for Smart Home

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: [
            WIcon(
              Icons.home,
              className: 'text-teal-400 text-base dark:text-teal-400'
            ),
            WText(
              'LIVING ROOM',
              className: 'text-xs font-semibold uppercase tracking-widest text-slate-400 dark:text-slate-500'
            ),
          ],
        ),
        WIcon(
          Icons.cloud,
          className: 'text-slate-500 text-base dark:text-slate-500'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-col items-center gap-2',
      children: [
        WText(
          '47',
          className: 'text-6xl font-extrabold text-white'
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-teal-500/15 dark:bg-teal-500/15',
          children: [
            WIcon(
              Icons.check,
              className: 'text-teal-400 text-sm dark:text-teal-400'
            ),
            WText(
              'Good air quality',
              className: 'text-xs font-bold text-teal-400 dark:text-teal-400'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'relative w-full',
      children: [
        WDiv(
          className: 'w-full h-2 rounded-full bg-gradient-to-r from-teal-400 via-amber-400 to-red-500 dark:from-teal-400 dark:via-amber-400 dark:to-red-500',
          child: WSpacer(
            className: 'w-[300px] h-2'
          ),
        ),
        WDiv(
          className: 'absolute -top-1 left-[40px] w-4 h-4 rounded-full bg-white border-2 border-slate-900 dark:bg-white dark:border-slate-900',
          child: WSpacer(
            className: 'w-4 h-4'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full pt-1',
      children: [
        WDiv(
          className: 'flex flex-col items-center gap-1',
          children: [
            WIcon(
              Icons.water_drop,
              className: 'text-blue-400 text-lg dark:text-blue-400'
            ),
            WText(
              '62%',
              className: 'text-sm font-bold text-white'
            ),
            WText(
              'Humidity',
              className: 'text-xs text-slate-400 dark:text-slate-500'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center gap-1',
          children: [
            WIcon(
              Icons.air,
              className: 'text-slate-300 text-lg dark:text-slate-300'
            ),
            WText(
              '412 ppm',
              className: 'text-sm font-bold text-white'
            ),
            WText(
              'CO2',
              className: 'text-xs text-slate-400 dark:text-slate-500'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center gap-1',
          children: [
            WIcon(
              Icons.ac_unit,
              className: 'text-cyan-300 text-lg dark:text-cyan-300'
            ),
            WText(
              '21°C',
              className: 'text-sm font-bold text-white'
            ),
            WText(
              'Temp',
              className: 'text-xs text-slate-400 dark:text-slate-500'
            ),
          ],
        ),
      ],
    ),
  ],
)