{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-3",
  "title": "90 Day Uptime Bars",
  "description": "Uptime history with per-service daily status bars for the last 90 days, colored by health, with uptime percentages and a legend.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/blocks/status/3/status-block.tsx",
      "content": "type DayStatus = \"operational\" | \"degraded\" | \"outage\"\n\ntype Day = { status: DayStatus; date: string; note: string }\n\nconst DAYS = 90\n\nconst dotColor: Record<DayStatus, string> = {\n  operational: \"bg-success\",\n  degraded: \"bg-warning\",\n  outage: \"bg-destructive\",\n}\n\nconst statusLabel: Record<DayStatus, string> = {\n  operational: \"Operational\",\n  degraded: \"Degraded\",\n  outage: \"Outage\",\n}\n\nconst MONTHS = [\n  \"Jan\",\n  \"Feb\",\n  \"Mar\",\n  \"Apr\",\n  \"May\",\n  \"Jun\",\n  \"Jul\",\n  \"Aug\",\n  \"Sep\",\n  \"Oct\",\n  \"Nov\",\n  \"Dec\",\n]\n\n// \"Today\" is anchored to a fixed date so the demo renders deterministically\n// (server and client agree, no hydration mismatch).\nconst TODAY = Date.UTC(2026, 5, 26)\nconst DAY_MS = 86_400_000\n\nfunction dateLabel(i: number): string {\n  const d = new Date(TODAY - (DAYS - 1 - i) * DAY_MS)\n  return `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}, ${d.getUTCFullYear()}`\n}\n\nfunction buildDays(\n  exceptions: Record<number, { status: DayStatus; note: string }>\n): Day[] {\n  return Array.from({ length: DAYS }, (_, i) => {\n    const ex = exceptions[i]\n    return {\n      status: ex?.status ?? \"operational\",\n      date: dateLabel(i),\n      note: ex?.note ?? \"No incidents. Service operated normally all day.\",\n    }\n  })\n}\n\nconst services: { name: string; uptime: string; days: Day[] }[] = [\n  {\n    name: \"API\",\n    uptime: \"99.98%\",\n    days: buildDays({\n      51: {\n        status: \"degraded\",\n        note: \"Elevated response times for 38 minutes after a slow database query. Resolved by rolling back the query plan.\",\n      },\n    }),\n  },\n  { name: \"Dashboard\", uptime: \"100%\", days: buildDays({}) },\n  {\n    name: \"Webhooks\",\n    uptime: \"99.91%\",\n    days: buildDays({\n      68: {\n        status: \"outage\",\n        note: \"Delivery outage for 1h 12m during a queue failover. All events were redelivered once service recovered.\",\n      },\n      80: {\n        status: \"degraded\",\n        note: \"Delayed deliveries for some workspaces over roughly 40 minutes. No events were lost.\",\n      },\n    }),\n  },\n  { name: \"CDN\", uptime: \"100%\", days: buildDays({}) },\n]\n\nconst legend: DayStatus[] = [\"operational\", \"degraded\", \"outage\"]\n\nexport default function StatusBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-3xl\">\n        <div className=\"mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between\">\n          <div>\n            <h2 className=\"font-heading text-2xl font-bold tracking-tight\">\n              Uptime\n            </h2>\n            <p className=\"mt-2 text-sm text-muted-foreground\">\n              99.97% uptime across all services over the last 90 days.\n            </p>\n          </div>\n          <ul className=\"flex items-center gap-4\">\n            {legend.map((status) => (\n              <li\n                key={status}\n                className=\"flex items-center gap-1.5 text-xs text-muted-foreground\"\n              >\n                <span\n                  className={`size-2 rounded-full ${dotColor[status]}`}\n                  aria-hidden=\"true\"\n                />\n                {statusLabel[status]}\n              </li>\n            ))}\n          </ul>\n        </div>\n\n        <div className=\"flex flex-col gap-7 rounded-lg border border-border p-6\">\n          {services.map((service) => (\n            <div key={service.name} className=\"flex flex-col gap-2\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm font-medium\">{service.name}</span>\n                <span className=\"text-xs text-muted-foreground tabular-nums\">\n                  {service.uptime}\n                </span>\n              </div>\n              <div className=\"flex h-8 items-stretch gap-px\" aria-hidden=\"true\">\n                {service.days.map((day, i) => (\n                  <span key={i} className=\"group relative flex-1\">\n                    <span\n                      className={`block h-full w-full rounded-[1px] ${dotColor[day.status]} opacity-80 transition-opacity group-hover:opacity-100`}\n                    />\n                    <span className=\"pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 hidden w-52 -translate-x-1/2 flex-col gap-1.5 rounded-lg border border-border bg-popover p-3 text-left shadow-md group-hover:flex\">\n                      <span className=\"flex items-center justify-between gap-2\">\n                        <span className=\"text-xs font-medium text-popover-foreground tabular-nums\">\n                          {day.date}\n                        </span>\n                        <span className=\"flex items-center gap-1.5 text-[11px] text-muted-foreground\">\n                          <span\n                            className={`size-1.5 rounded-full ${dotColor[day.status]}`}\n                          />\n                          {statusLabel[day.status]}\n                        </span>\n                      </span>\n                      <span className=\"text-[11px]/relaxed text-muted-foreground\">\n                        {day.note}\n                      </span>\n                    </span>\n                  </span>\n                ))}\n              </div>\n            </div>\n          ))}\n\n          <div className=\"flex items-center justify-between text-xs text-muted-foreground\">\n            <span>90 Days Ago</span>\n            <span>Today</span>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/status-3.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "success": "oklch(0.432 0.095 166.913)",
      "warning": "oklch(0.473 0.137 46.201)"
    },
    "dark": {
      "success": "oklch(0.765 0.177 163.223)",
      "warning": "oklch(0.828 0.189 84.429)"
    }
  },
  "meta": {
    "height": "646px",
    "tier": "free"
  },
  "categories": [
    "status"
  ],
  "type": "registry:block"
}