{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "integrations-search-directory",
  "title": "Integrations — Search Directory",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/integrations-search-directory/IntegrationsSearchDirectory.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowUpRight, Search } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\n\nconst integrations = [\n  {\n    mark: 'SF',\n    name: 'Snowflake',\n    category: 'Warehouses',\n    blurb: 'Query live tables with a read-only role.',\n    auth: 'Key pair',\n  },\n  {\n    mark: 'BQ',\n    name: 'BigQuery',\n    category: 'Warehouses',\n    blurb: 'Service-account access, per-dataset scope.',\n    auth: 'Service account',\n  },\n  {\n    mark: 'RS',\n    name: 'Redshift',\n    category: 'Warehouses',\n    blurb: 'Serverless and provisioned clusters.',\n    auth: 'IAM role',\n  },\n  {\n    mark: 'OK',\n    name: 'Okta',\n    category: 'Identity',\n    blurb: 'Group membership drives row-level scope.',\n    auth: 'SAML + SCIM',\n  },\n  {\n    mark: 'EI',\n    name: 'Entra ID',\n    category: 'Identity',\n    blurb: 'Directory groups sync on a schedule.',\n    auth: 'SAML + SCIM',\n  },\n  {\n    mark: 'SL',\n    name: 'Slack',\n    category: 'Alerting',\n    blurb: 'Route alerts to the metric owner’s channel.',\n    auth: 'OAuth',\n  },\n  {\n    mark: 'PD',\n    name: 'PagerDuty',\n    category: 'Alerting',\n    blurb: 'Page on freshness breaches, not on noise.',\n    auth: 'API key',\n  },\n  {\n    mark: 'DT',\n    name: 'dbt',\n    category: 'Modelling',\n    blurb: 'Import models as certified metric sources.',\n    auth: 'API token',\n  },\n  {\n    mark: 'AF',\n    name: 'Airflow',\n    category: 'Modelling',\n    blurb: 'Trigger materialisation from your DAGs.',\n    auth: 'API token',\n  },\n]\n\nconst query = ref('')\nconst matches = computed(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) return integrations\n  return integrations.filter((i) => `${i.name} ${i.category} ${i.blurb} ${i.auth}`.toLowerCase().includes(q))\n})\nconst groups = computed(() => {\n  const map = new Map<string, typeof integrations>()\n  for (const integration of matches.value) {\n    const list = map.get(integration.category)\n    if (list) list.push(integration)\n    else map.set(integration.category, [integration])\n  }\n  return [...map.entries()]\n})\n</script>\n\n<template>\n  <section data-slot=\"integrations-search-directory\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n      <div class=\"flex flex-wrap items-end justify-between gap-6\">\n        <div>\n          <Badge variant=\"secondary\">Directory</Badge>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Find your stack</h2>\n        </div>\n\n        <div class=\"relative w-full sm:w-72\">\n          <Search\n            class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2\"\n            aria-hidden=\"true\"\n          />\n          <Input v-model=\"query\" class=\"pl-9\" placeholder=\"Search integrations…\" aria-label=\"Search integrations\" />\n        </div>\n      </div>\n\n      <Card class=\"mt-8\">\n        <CardContent class=\"p-2\">\n          <div v-if=\"!groups.length\" class=\"px-4 py-16 text-center\">\n            <p class=\"text-sm font-medium\">No integration matches “{{ query }}”.</p>\n            <p class=\"text-muted-foreground mt-1 text-xs\">\n              We ship new connectors most releases — tell us which one you need.\n            </p>\n            <Button variant=\"outline\" size=\"sm\" class=\"mt-4\">Request an integration</Button>\n          </div>\n\n          <div v-for=\"([category, list], index) in groups\" :key=\"category\">\n            <p class=\"text-muted-foreground px-4 pt-4 pb-2 font-mono text-xs tracking-[0.14em] uppercase\">\n              {{ category }}\n            </p>\n            <ul>\n              <li v-for=\"integration in list\" :key=\"integration.name\">\n                <a\n                  href=\"#\"\n                  class=\"hover:bg-muted focus-visible:ring-ring group flex items-center gap-4 rounded-lg px-4 py-3 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n                >\n                  <span\n                    class=\"border-border text-muted-foreground flex size-9 shrink-0 items-center justify-center rounded-md border font-mono text-xs font-semibold\"\n                    aria-hidden=\"true\"\n                  >\n                    {{ integration.mark }}\n                  </span>\n                  <span class=\"min-w-0 flex-1\">\n                    <span class=\"block text-sm font-medium\">{{ integration.name }}</span>\n                    <span class=\"text-muted-foreground block truncate text-xs\">{{ integration.blurb }}</span>\n                  </span>\n                  <Badge variant=\"outline\" class=\"hidden shrink-0 sm:inline-flex\">{{ integration.auth }}</Badge>\n                  <ArrowUpRight\n                    class=\"text-muted-foreground size-4 shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                    aria-hidden=\"true\"\n                  />\n                </a>\n              </li>\n            </ul>\n            <Separator v-if=\"index < groups.length - 1\" class=\"my-2\" />\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/IntegrationsSearchDirectory.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Searchable integration directory: a live filter field above category-grouped rows carrying a monogram, blurb, and auth type, with an empty state when nothing matches.",
  "categories": [
    "marketing"
  ]
}