{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-2",
  "title": "Incident History Feed",
  "description": "Incident history feed grouping past incidents by date, each with an impact badge and a timeline of investigating to resolved status updates.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "marker"
  ],
  "files": [
    {
      "path": "registry/blocks/status/2/status-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { Marker, MarkerContent } from \"@/components/ui/marker\"\n\ntype UpdateStatus = \"Resolved\" | \"Monitoring\" | \"Identified\" | \"Investigating\"\n\nconst statusText: Record<UpdateStatus, string> = {\n  Resolved: \"text-success\",\n  Monitoring: \"text-info\",\n  Identified: \"text-warning\",\n  Investigating: \"text-destructive\",\n}\n\ntype Incident = {\n  date: string\n  title: string\n  impact: \"Minor\" | \"Major\"\n  updates: { status: UpdateStatus; time: string; message: string }[]\n}\n\nconst incidents: Incident[] = [\n  {\n    date: \"Jun 18, 2026\",\n    title: \"Elevated API error rates\",\n    impact: \"Minor\",\n    updates: [\n      {\n        status: \"Resolved\",\n        time: \"14:20 UTC\",\n        message:\n          \"Error rates have returned to normal and the fix is fully deployed.\",\n      },\n      {\n        status: \"Monitoring\",\n        time: \"13:05 UTC\",\n        message:\n          \"A fix has been rolled out and we are watching error rates closely.\",\n      },\n      {\n        status: \"Identified\",\n        time: \"12:30 UTC\",\n        message:\n          \"The issue was traced to a slow database query and a fix is underway.\",\n      },\n    ],\n  },\n  {\n    date: \"Jun 04, 2026\",\n    title: \"Webhook delivery delays\",\n    impact: \"Minor\",\n    updates: [\n      {\n        status: \"Resolved\",\n        time: \"09:15 UTC\",\n        message: \"The webhook queue has fully drained and delivery is on time.\",\n      },\n      {\n        status: \"Investigating\",\n        time: \"08:40 UTC\",\n        message:\n          \"We are investigating delayed webhook deliveries for some workspaces.\",\n      },\n    ],\n  },\n]\n\nexport default function StatusBlock() {\n  return (\n    <section className=\"flex min-h-svh w-full justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-2xl\">\n        <div className=\"mb-8\">\n          <h2 className=\"font-heading text-2xl font-bold tracking-tight\">\n            Incident history\n          </h2>\n          <p className=\"mt-2 text-sm text-muted-foreground\">\n            Past incidents and the updates we posted while resolving them.\n          </p>\n        </div>\n\n        <div className=\"flex flex-col gap-8\">\n          {incidents.map((incident) => (\n            <div\n              key={`${incident.date}-${incident.title}`}\n              className=\"flex flex-col gap-3\"\n            >\n              <Marker variant=\"separator\">\n                <MarkerContent className=\"tabular-nums\">\n                  {incident.date}\n                </MarkerContent>\n              </Marker>\n              <div className=\"rounded-lg border border-border bg-card p-5\">\n                <div className=\"flex items-center gap-2.5\">\n                  <h3 className=\"font-heading text-sm font-semibold\">\n                    {incident.title}\n                  </h3>\n                  <Badge variant=\"secondary\">{incident.impact}</Badge>\n                </div>\n\n                <ol className=\"mt-4 flex flex-col gap-4\">\n                  {incident.updates.map((update) => (\n                    <li\n                      key={update.time}\n                      className=\"grid grid-cols-[5.5rem_1fr] gap-x-3 gap-y-1\"\n                    >\n                      <span\n                        className={`text-sm font-medium ${statusText[update.status]}`}\n                      >\n                        {update.status}\n                      </span>\n                      <span className=\"text-xs text-muted-foreground tabular-nums\">\n                        {update.time}\n                      </span>\n                      <p className=\"col-start-2 text-sm/relaxed text-muted-foreground\">\n                        {update.message}\n                      </p>\n                    </li>\n                  ))}\n                </ol>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/status-2.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "success": "oklch(0.432 0.095 166.913)",
      "warning": "oklch(0.473 0.137 46.201)",
      "info": "oklch(0.443 0.110 240.790)"
    },
    "dark": {
      "success": "oklch(0.765 0.177 163.223)",
      "warning": "oklch(0.828 0.189 84.429)",
      "info": "oklch(0.746 0.160 232.661)"
    }
  },
  "meta": {
    "height": "754px",
    "tier": "free"
  },
  "categories": [
    "status"
  ],
  "type": "registry:block"
}