{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "integrations-02",
  "title": "Integrations 02",
  "description": "A simple integrations block",
  "files": [
    {
      "path": "src/registry/blocks/radix/integrations-02/components/integrations.tsx",
      "content": "import { ArrowUpRight } from \"lucide-react\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\n\nexport default function Integrations() {\n  return (\n    <div className=\"my-12 px-6 sm:my-14\">\n      <div className=\"mx-auto flex w-full max-w-md flex-col rounded-lg border bg-muted p-1 shadow-lg/2\">\n        <div className=\"rounded-md border bg-card p-6\">\n          <h2 className=\"font-medium text-2xl tracking-tight\">\n            Our Integrations\n          </h2>\n          <p className=\"mt-1.5 text-pretty text-muted-foreground\">\n            Connect your favorite tools and services and start using them in\n            your app.\n          </p>\n          <div className=\"mx-auto mt-8 flex w-full flex-col gap-3\">\n            {integrations.map((integration) => (\n              <div\n                className=\"flex items-center gap-3 rounded-lg border bg-card px-3 py-3\"\n                key={integration.title}\n              >\n                <img\n                  alt={integration.title}\n                  className=\"size-8 rounded\"\n                  src={`https://www.google.com/s2/favicons?domain=${encodeURIComponent(integration.url)}&sz=64`}\n                />\n                <h3 className=\"font-medium\">{integration.title}</h3>\n\n                {integration.status === \"connected\" ? (\n                  <Badge className=\"ms-auto h-7 min-w-26 rounded-lg bg-emerald-600/10 px-3 text-emerald-600 text-sm\">\n                    Connected\n                  </Badge>\n                ) : (\n                  <Button\n                    className=\"ms-auto h-7 min-w-26\"\n                    size=\"sm\"\n                    variant=\"outline\"\n                  >\n                    Connect <ArrowUpRight />\n                  </Button>\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nconst integrations = [\n  {\n    title: \"PostHog\",\n    description: \"PostHog is an open-source product analytics tool.\",\n    url: \"https://posthog.com/\",\n    status: \"connected\",\n  },\n  {\n    title: \"Mailchimp\",\n    description:\n      \"Marketing platform for creating, sending, and automating emails.\",\n    url: \"https://mailchimp.com\",\n  },\n  {\n    title: \"Webflow\",\n    description: \"Website builder for creating and managing websites.\",\n    url: \"https://webflow.com/\",\n    status: \"pending\",\n  },\n  {\n    title: \"Stripe\",\n    description: \"Payment processing for online businesses and platforms.\",\n    url: \"https://stripe.com\",\n  },\n  {\n    title: \"Sanity\",\n    description:\n      \"Content management system for creating and managing websites.\",\n    url: \"https://sanity.io/\",\n    status: \"pending\",\n  },\n  {\n    title: \"Zapier\",\n    description:\n      \"Automation tool for connecting and syncing data between different apps and services.\",\n    url: \"https://zapier.com\",\n  },\n];\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}