{
  "name": "status-list-demo",
  "type": "registry:example",
  "registryDependencies": [
    "status"
  ],
  "files": [
    {
      "path": "examples/status-list-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  Status,\n  StatusIndicator,\n  StatusLabel,\n} from \"@/registry/bases/radix/ui/status\";\n\nconst services = [\n  { name: \"API Server\", status: \"success\" as const, uptime: \"99.9%\" },\n  { name: \"Cache Service\", status: \"warning\" as const, uptime: \"98.5%\" },\n  { name: \"Message Queue\", status: \"success\" as const, uptime: \"99.8%\" },\n  { name: \"CDN\", status: \"error\" as const, uptime: \"95.2%\" },\n  { name: \"Email Service\", status: \"info\" as const, uptime: \"Updating...\" },\n];\n\nexport default function StatusListDemo() {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-2\">\n      {services.map((service) => (\n        <div\n          key={service.name}\n          className=\"flex items-center justify-between rounded-lg border bg-card p-3\"\n        >\n          <div className=\"flex flex-col gap-0.5\">\n            <span className=\"text-sm font-medium\">{service.name}</span>\n            <span className=\"text-xs text-muted-foreground\">\n              Uptime: {service.uptime}\n            </span>\n          </div>\n          <Status variant={service.status}>\n            <StatusIndicator />\n            <StatusLabel className=\"capitalize\">{service.status}</StatusLabel>\n          </Status>\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}