{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-item-11","type":"registry:block","title":"Integration items with connect actions","description":"Integration items with connect actions","dependencies":[],"registryDependencies":["@reui/badge","button","item"],"files":[{"path":"c-item-11.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-md flex-col\">\n      <ItemGroup>\n        <Item variant=\"outline\" size=\"xs\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"DatabaseIcon\"\n              tabler=\"IconDatabase\"\n              hugeicons=\"DatabaseIcon\"\n              phosphor=\"DatabaseIcon\"\n              remixicon=\"RiDatabase2Line\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Database</ItemTitle>\n            <ItemDescription>\n              Sync records from your data warehouse\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Badge variant=\"success-light\" size=\"sm\">\n              Connected\n            </Badge>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"xs\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"WebhookIcon\"\n              tabler=\"IconWebhook\"\n              hugeicons=\"WebhookIcon\"\n              phosphor=\"WebhooksLogoIcon\"\n              remixicon=\"RiWebhookLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Webhooks</ItemTitle>\n            <ItemDescription>\n              Push realtime events to your endpoints\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Badge variant=\"success-light\" size=\"sm\">\n              Connected\n            </Badge>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"xs\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>API access</ItemTitle>\n            <ItemDescription>\n              Build custom integrations with the REST API\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Connect\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </div>\n  )\n}","target":"components/examples/c-item-11.tsx"}],"meta":{"order":11,"label":"Integrations"}}