Status components with uptime bars

<section class="mx-auto max-w-2xl px-4" aria-labelledby="status-title">
  <h2 id="status-title" class="mb-4 text-lg font-semibold text-slate-900">System status</h2>
  <ul id="components" class="divide-y divide-slate-200 rounded-xl border border-slate-200 bg-white"></ul>
</section>

// Each day is a number: 100 = fully up, lower = partial outage, null = no data.
const components = [
  { name: 'Website',  state: 'operational', uptime: 99.98, days: Array.from({ length: 45 }, () => 100) },
  { name: 'API',      state: 'degraded',    uptime: 99.41, days: Array.from({ length: 45 }, (_, i) => (i === 38 ? 92 : 100)) },
  { name: 'Payments', state: 'outage',      uptime: 98.2,  days: Array.from({ length: 45 }, (_, i) => (i > 41 ? 40 : 100)) },
];

const badge = {
  operational: 'bg-emerald-100 text-emerald-800',
  degraded: 'bg-amber-100 text-amber-800',
  outage: 'bg-rose-100 text-rose-800',
};
const barColor = (v) => (v === null ? 'bg-slate-200' : v >= 99 ? 'bg-emerald-500' : v >= 90 ? 'bg-amber-400' : 'bg-rose-500');

document.getElementById('components').innerHTML = components.map((c) => `
  <li class="p-4">
    <div class="mb-2 flex items-center justify-between">
      <span class="font-medium text-slate-900">${c.name}</span>
      <span class="rounded-full px-2 py-0.5 text-xs font-medium capitalize ${badge[c.state]}">${c.state}</span>
    </div>
    <div class="flex h-8 gap-px" role="img" aria-label="${c.name} uptime over the last ${c.days.length} days: ${c.uptime}%">
      ${c.days.map((v, i) => `<span class="flex-1 rounded-sm ${barColor(v)}" title="${c.days.length - i} days ago: ${v ?? 'no data'}%"></span>`).join('')}
    </div>
    <div class="mt-1 flex justify-between text-xs text-slate-500"><span>${c.days.length} days ago</span><span>${c.uptime}% uptime</span><span>Today</span></div>
  </li>`).join('');