{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "online-status-demo",
  "registryDependencies": [
    "https://reusables.vercel.app/r/submit-button"
  ],
  "files": [
    {
      "path": "registry/example/online-status-demo.tsx",
      "content": "\"use client\"\n\nimport { RefreshCcw, Signal, WifiIcon } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nimport useOnlineStatus from \"@/hooks/use-online-status\"\n\nexport default function NetworkStatusMonitor() {\n  const {\n    isOnline,\n    lastChanged,\n    connectionQuality,\n    latency,\n    checkConnectionNow,\n    retryConnection,\n    isRetrying,\n  } = useOnlineStatus()\n\n  return (\n    <div className=\"mx-auto rounded-xl border border-gray-200/20 bg-white/10 p-6 shadow-xl backdrop-blur-lg\">\n      <div className=\"space-y-6\">\n        <div className=\"flex items-center justify-between\">\n          <h2 className=\"my-0 text-lg font-semibold\">Network Status</h2>\n          <span\n            className={`rounded-full px-3 py-1 text-sm font-medium ${\n              isOnline ?\n                \"bg-green-100 text-green-800\"\n              : \"bg-red-100 text-red-800\"\n            }`}\n          >\n            <WifiIcon className=\"mr-2 inline h-4 w-4\" />\n            {isOnline ? \"Online\" : \"Offline\"}\n          </span>\n        </div>\n\n        <div className=\"grid gap-4 rounded-lg bg-gray-50/5 p-4\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-gray-500\">Quality</span>\n            <div className=\"flex items-center gap-2\">\n              <Signal className=\"h-4 w-4\" />\n              <span className=\"font-medium\">{connectionQuality}</span>\n              {latency > 0 && (\n                <span className=\"ml-2 text-sm\">{latency.toFixed(0)}ms</span>\n              )}\n            </div>\n          </div>\n\n          <div className=\"flex items-center justify-between gap-2\">\n            <span className=\"text-gray-500\">Last Updated</span>\n            <span className=\"font-medium\">\n              {new Date(lastChanged).toLocaleTimeString()}\n            </span>\n          </div>\n        </div>\n\n        <div className=\"flex flex-col gap-3\">\n          {isOnline ?\n            <Button\n              onClick={checkConnectionNow}\n              className=\"flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-2 transition-colors\"\n            >\n              <RefreshCcw className=\"h-4 w-4\" />\n              Check Now\n            </Button>\n          : <Button onClick={retryConnection}>\n              <WifiIcon className=\"h-4 w-4 shrink-0\" />\n              Retry\n            </Button>\n          }\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/online-status-demo.tsx"
    }
  ],
  "type": "registry:example"
}