{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-page",
  "type": "registry:component",
  "title": "Status page",
  "description": "A React system status panel with an overall outage badge and a list of services, each marked operational or degraded by a colored health indicator.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/badge.json",
    "https://ui.minidev.pro/r/health-indicator.json"
  ],
  "files": [
    {
      "path": "registry/blocks/status-page.tsx",
      "type": "registry:ui",
      "target": "components/ui/status-page.tsx",
      "content": "\"use client\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { HealthIndicator } from \"@/components/ui/health-indicator\"\n\nconst SERVICES = [\n  { name: \"Registry CDN\", status: \"operational\" as const },\n  { name: \"Docs\", status: \"operational\" as const },\n  { name: \"Background jobs\", status: \"degraded\" as const },\n  { name: \"Playground\", status: \"operational\" as const },\n]\n\nfunction StatusPage() {\n  return (\n    <div data-slot=\"status-page\" className=\"space-y-4 rounded-2xl border border-border bg-surface p-6 shadow-highlight\">\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div>\n          <h3 className=\"text-xl font-medium tracking-[-0.014em] text-fg\">System status</h3>\n          <p className=\"mt-1 text-sm text-fg-muted\">All core surfaces up. Audit workers delayed.</p>\n        </div>\n        <Badge variant=\"outline\">Partial outage</Badge>\n      </div>\n      <ul className=\"space-y-2\">\n        {SERVICES.map((s) => (\n          <li key={s.name} className=\"flex items-center justify-between rounded-xl border border-border bg-bg px-3 py-2.5\">\n            <span className=\"text-sm text-fg\">{s.name}</span>\n            <HealthIndicator status={s.status} label={s.status} />\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\nexport { StatusPage }\n"
    }
  ]
}