{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "incident-banner",
  "type": "registry:ui",
  "title": "Incident banner",
  "description": "A full width Tailwind status bar announcing an outage with minor, major and critical severity colors, the incident title and a link to your status page.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/status-dot.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/incident-banner.tsx",
      "type": "registry:ui",
      "target": "components/ui/incident-banner.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { StatusDot } from \"@/components/ui/status-dot\"\n\nfunction IncidentBanner({\n  title = \"Elevated API errors in us-east\",\n  severity = \"major\",\n  href = \"#\",\n  className,\n}: {\n  title?: string\n  severity?: \"minor\" | \"major\" | \"critical\"\n  href?: string\n  className?: string\n}) {\n  const tone = severity === \"critical\" ? \"danger\" : severity === \"major\" ? \"warning\" : \"accent\"\n  return (\n    <div\n      data-slot=\"incident-banner\"\n      role=\"status\"\n      className={cn(\n        \"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-surface px-4 py-2.5\",\n        className\n      )}\n    >\n      <div className=\"flex items-center gap-2 text-sm text-fg\">\n        <StatusDot tone={tone === \"accent\" ? \"accent\" : tone === \"warning\" ? \"warning\" : \"danger\"} />\n        <span className=\"font-medium capitalize\">{severity}</span>\n        <span aria-hidden>·</span>\n        <span>{title}</span>\n      </div>\n      <a href={href} className=\"inline-flex h-8 items-center rounded-lg border border-border bg-surface px-2.5 text-xs font-medium text-fg outline-none hover:border-fg-subtle focus-visible:ring-2 focus-visible:ring-accent\">Status page</a>\n    </div>\n  )\n}\nexport { IncidentBanner }\n"
    }
  ]
}