{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "live-telemetry-status-grid",
  "type": "registry:ui",
  "title": "Global Edge Telemetry Node Grid",
  "description": "Real-time edge cluster status dashboard displaying geographical regions, latency round-trip ping, and heartbeat health indicators.",
  "category": "data",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/data/live-telemetry-status-grid/live-telemetry-status-grid.tsx",
      "type": "registry:ui",
      "target": "components/ui/live-telemetry-status-grid.tsx",
      "content": "import React from 'react';\nimport { Globe } from '@phosphor-icons/react';\n\nconst NODES = [\n  { region: 'us-east-1 (N. Virginia)', ping: 12, status: 'operational' },\n  { region: 'eu-west-1 (Frankfurt)', ping: 24, status: 'operational' },\n  { region: 'ap-south-1 (Mumbai)', ping: 48, status: 'operational' },\n  { region: 'ap-northeast-1 (Tokyo)', ping: 31, status: 'operational' },\n];\n\nexport const LiveTelemetryStatusGrid: React.FC = () => {\n  return (\n    <div className=\"w-full max-w-md mx-auto p-4 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white/90 dark:bg-zinc-900/90 shadow-lg backdrop-blur-md font-mono text-xs\">\n      <div className=\"flex items-center justify-between pb-3 border-b border-zinc-100 dark:border-white/5 text-[11px] text-zinc-500\">\n        <div className=\"flex items-center gap-1.5\">\n          <Globe size={13} className=\"text-cyan-400\" />\n          <span className=\"font-semibold text-zinc-800 dark:text-zinc-200\">Edge Network Health</span>\n        </div>\n        <span className=\"text-emerald-500 font-bold\">4/4 Nodes Healthy</span>\n      </div>\n\n      <div className=\"mt-3 space-y-2\">\n        {NODES.map((node) => (\n          <div\n            key={node.region}\n            className=\"flex items-center justify-between p-2 rounded-xl bg-zinc-50 dark:bg-zinc-950/50 border border-zinc-100 dark:border-white/5\"\n          >\n            <div className=\"flex items-center gap-2\">\n              <span className=\"h-2 w-2 rounded-full bg-emerald-400 animate-pulse\" />\n              <span className=\"text-[11px] text-zinc-700 dark:text-zinc-300 font-medium\">{node.region}</span>\n            </div>\n            <span className=\"text-[10px] text-zinc-500\">{node.ping}ms RTT</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}