{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "integration-card",
  "type": "registry:ui",
  "title": "Integration card",
  "description": "An app integration tile with the service name, a short description, a Connected or Available badge and a Connect or Manage button. Built in React.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/badge.json",
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/integration-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/integration-card.tsx",
      "content": "\"use client\"\nimport { Button } from \"@/components/ui/button\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { cn } from \"@/lib/utils\"\n\nfunction IntegrationCard({\n  name = \"Linear\",\n  description = \"Sync issues into the engineering gallery.\",\n  connected = false,\n  className,\n}: {\n  name?: string\n  description?: string\n  connected?: boolean\n  className?: string\n}) {\n  return (\n    <div data-slot=\"integration-card\" className={cn(\"rounded-xl border border-border bg-surface p-4 shadow-highlight\", className)}>\n      <div className=\"flex items-start justify-between gap-3\">\n        <div>\n          <h3 className=\"text-sm font-medium text-fg\">{name}</h3>\n          <p className=\"mt-1 text-xs leading-[1.55] text-fg-muted\">{description}</p>\n        </div>\n        <Badge variant=\"outline\">{connected ? \"Connected\" : \"Available\"}</Badge>\n      </div>\n      <Button className=\"mt-4 w-full\" size=\"sm\" variant={connected ? \"outline\" : \"default\"}>\n        {connected ? \"Manage\" : \"Connect\"}\n      </Button>\n    </div>\n  )\n}\nexport { IntegrationCard }\n"
    }
  ]
}