{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "offline-banner",
  "type": "registry:ui",
  "title": "Offline banner",
  "description": "A full width amber banner shown when the app loses its connection, with a wifi off icon, a note that changes will sync later and an optional Retry button.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/offline-banner.tsx",
      "type": "registry:ui",
      "target": "components/ui/offline-banner.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { WifiOffIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nfunction OfflineBanner({\n  className,\n  onRetry,\n}: {\n  className?: string\n  onRetry?: () => void\n}) {\n  return (\n    <div\n      data-slot=\"offline-banner\"\n      role=\"status\"\n      className={cn(\n        \"flex flex-wrap items-center justify-center gap-3 border-b border-warning/40 bg-warning/10 px-4 py-2.5 text-sm text-fg\",\n        className\n      )}\n    >\n      <span className=\"inline-flex items-center gap-2\">\n        <WifiOffIcon className=\"size-4\" aria-hidden />\n        You are offline. Changes will sync when you reconnect.\n      </span>\n      {onRetry ? (\n        <Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={onRetry}>Retry</Button>\n      ) : null}\n    </div>\n  )\n}\nexport { OfflineBanner }\n"
    }
  ]
}