{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "integrations-featured-pairs",
  "title": "Integrations — Featured Pairs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/integrations-featured-pairs/integrations-featured-pairs.component.ts",
      "content": "// Three promoted integrations, each a card pairing the service with what the\n// connection actually does, the three setup steps it takes, and its live\n// connection state. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, Check, LucideAngularModule, Plug } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\ninterface FeaturedIntegration {\n  mark: string\n  name: string\n  summary: string\n  steps: string[]\n  status: string\n  healthy: boolean\n  meta: string\n}\n\nconst featured: FeaturedIntegration[] = [\n  {\n    mark: 'SF',\n    name: 'Snowflake',\n    summary: 'Query your warehouse directly. Metrics resolve against live tables instead of a nightly copy.',\n    steps: ['Create a read-only role', 'Paste the account URL', 'Pick the databases to expose'],\n    status: 'Connected',\n    healthy: true,\n    meta: 'Read-only · no data egress',\n  },\n  {\n    mark: 'OK',\n    name: 'Okta',\n    summary: 'Group membership drives row-level scope, so access changes the moment HR changes it.',\n    steps: ['Add the SAML app', 'Enable SCIM provisioning', 'Map groups to scopes'],\n    status: 'Connected',\n    healthy: true,\n    meta: 'SAML + SCIM',\n  },\n  {\n    mark: 'SL',\n    name: 'Slack',\n    summary: 'Drift and freshness alerts land in the channel that owns the metric, with the run attached.',\n    steps: ['Install the app', 'Choose default channels', 'Route alerts per metric owner'],\n    status: 'Needs re-auth',\n    healthy: false,\n    meta: 'Token expires every 90 days',\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-integrations-featured-pairs, [ui-integrations-featured-pairs]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"integrations-featured-pairs\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div class=\"max-w-2xl\">\n          <span ui-badge variant=\"secondary\">Featured integrations</span>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">The three most teams connect first</h2>\n          <p class=\"text-muted-foreground mt-3 text-lg\">\n            Each one is three steps and read-only. What the connection actually does is written on the card.\n          </p>\n        </div>\n\n        <div class=\"mt-10 grid gap-4 md:grid-cols-3\">\n          @for (integration of featured; track integration.name) {\n            <div ui-card>\n              <div ui-card-content class=\"flex h-full flex-col p-6\">\n                <div class=\"flex items-center gap-3\">\n                  <span\n                    class=\"border-border text-muted-foreground flex size-10 items-center justify-center rounded-lg border font-mono text-sm font-semibold\"\n                    aria-hidden=\"true\"\n                  >\n                    {{ integration.mark }}\n                  </span>\n                  <div class=\"min-w-0\">\n                    <p class=\"truncate text-sm font-semibold\">{{ integration.name }}</p>\n                    <p class=\"text-muted-foreground truncate text-xs\">{{ integration.meta }}</p>\n                  </div>\n                </div>\n\n                <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">{{ integration.summary }}</p>\n\n                <ui-separator class=\"my-5\" />\n\n                <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">Setup</p>\n                <ol class=\"mt-3 space-y-2\">\n                  @for (step of integration.steps; track step; let i = $index) {\n                    <li class=\"text-foreground flex items-start gap-2.5 text-sm\">\n                      <span class=\"text-muted-foreground/70 mt-px font-mono text-xs\">{{ i + 1 }}</span>\n                      <span>{{ step }}</span>\n                    </li>\n                  }\n                </ol>\n\n                <div class=\"mt-auto flex items-center justify-between gap-3 pt-6\">\n                  <span ui-badge [variant]=\"integration.healthy ? 'secondary' : 'outline'\" class=\"gap-1.5\">\n                    @if (integration.healthy) {\n                      <lucide-icon [img]=\"Check\" class=\"size-3\" aria-hidden=\"true\" />\n                    } @else {\n                      <lucide-icon [img]=\"Plug\" class=\"size-3\" aria-hidden=\"true\" />\n                    }\n                    {{ integration.status }}\n                  </span>\n                  <button ui-button variant=\"ghost\" size=\"sm\" class=\"h-auto px-2 py-1\">\n                    Docs\n                    <lucide-icon [img]=\"ArrowRight\" class=\"ml-1 size-3.5\" aria-hidden=\"true\" />\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiIntegrationsFeaturedPairsComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Check = Check\n  protected readonly Plug = Plug\n\n  protected readonly featured = featured\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/integrations-featured-pairs/integrations-featured-pairs.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/integrations-featured-pairs/index.ts",
      "content": "export { UiIntegrationsFeaturedPairsComponent } from './integrations-featured-pairs.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/integrations-featured-pairs/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Three promoted integrations, each a card pairing the service with what the connection actually does, the three setup steps it takes, and its live connection state.",
  "categories": [
    "marketing"
  ]
}