{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "webhook-list",
  "type": "registry:ui",
  "title": "Webhook list",
  "description": "Webhook endpoints list with an Add endpoint button, monospace URLs, subscribed events and an active or paused badge per row. Built for developer settings pages.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/badge.json",
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/webhook-list.tsx",
      "type": "registry:ui",
      "target": "components/ui/webhook-list.tsx",
      "content": "\"use client\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nconst HOOKS = [\n  { url: \"https://hooks.acme.co/minidev\", events: \"audit, billing\", status: \"active\" },\n  { url: \"https://hooks.north.io/registry\", events: \"deploy\", status: \"paused\" },\n]\n\nfunction WebhookList({ className }: { className?: string }) {\n  return (\n    <div data-slot=\"webhook-list\" className={cn(\"overflow-hidden rounded-2xl border border-border bg-surface shadow-highlight\", className)}>\n      <div className=\"flex items-center justify-between border-b border-border px-4 py-3\">\n        <h3 className=\"text-sm font-medium text-fg\">Webhooks</h3>\n        <Button size=\"sm\">Add endpoint</Button>\n      </div>\n      <ul>\n        {HOOKS.map((h) => (\n          <li key={h.url} className=\"flex flex-wrap items-center justify-between gap-2 border-b border-border px-4 py-3 last:border-b-0\">\n            <div className=\"min-w-0\">\n              <p className=\"truncate font-mono text-xs text-fg\">{h.url}</p>\n              <p className=\"mt-0.5 text-xs text-fg-muted\">{h.events}</p>\n            </div>\n            <Badge variant=\"outline\">{h.status}</Badge>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\nexport { WebhookList }\n"
    }
  ]
}