{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "uptime-bar",
  "type": "registry:ui",
  "title": "Uptime bar",
  "description": "Status page uptime bar with one cell per day over 90 days, green when operational and red on degraded days, and the uptime percentage above. Built in Tailwind.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/uptime-bar.tsx",
      "type": "registry:ui",
      "target": "components/ui/uptime-bar.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction UptimeBar({\n  label = \"API\",\n  days = 90,\n  downtimes = [12, 44],\n  className,\n}: {\n  label?: string\n  days?: number\n  downtimes?: number[]\n  className?: string\n}) {\n  const cells = Array.from({ length: days }, (_, i) => downtimes.includes(i))\n  return (\n    <div data-slot=\"uptime-bar\" className={cn(\"space-y-2\", className)}>\n      <div className=\"flex items-center justify-between text-xs\">\n        <span className=\"font-medium text-fg\">{label}</span>\n        <span className=\"tabular-nums text-fg-muted\">{(((days - downtimes.length) / days) * 100).toFixed(2)}%</span>\n      </div>\n      <div className=\"flex gap-px\" role=\"img\" aria-label={`${label} uptime over ${days} days`}>\n        {cells.map((down, i) => (\n          <div\n            key={i}\n            className={cn(\"h-8 flex-1 rounded-[1px]\", down ? \"bg-danger\" : \"bg-success/70\")}\n            title={down ? \"Degraded\" : \"Operational\"}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\nexport { UptimeBar }\n"
    }
  ]
}