{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "code-tabs-multi-language",
  "title": "Code — Multi-Language Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/code-tabs-multi-language/CodeTabsMultiLanguage.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Check, Copy } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\n// Samples are plain strings, so a highlighter can be layered on later without\n// touching this component.\nconst samples = [\n  {\n    id: 'curl',\n    label: 'cURL',\n    code: `curl https://api.northwind.dev/v1/metrics/revenue_net \\\\\n  -H \"Authorization: Bearer $NORTHWIND_TOKEN\" \\\\\n  -d 'window=trailing_28d' \\\\\n  -d 'group_by=region'`,\n  },\n  {\n    id: 'ts',\n    label: 'TypeScript',\n    code: `import { Northwind } from '@northwind/metrics'\n\nconst client = new Northwind(process.env.NORTHWIND_TOKEN)\n\nconst revenue = await client.metrics.get('revenue_net', {\n  window: 'trailing_28d',\n  groupBy: ['region'],\n})`,\n  },\n  {\n    id: 'python',\n    label: 'Python',\n    code: `from northwind import Northwind\n\nclient = Northwind(os.environ[\"NORTHWIND_TOKEN\"])\n\nrevenue = client.metrics.get(\n    \"revenue_net\",\n    window=\"trailing_28d\",\n    group_by=[\"region\"],\n)`,\n  },\n]\n\nconst copied = ref('')\n\nasync function copy(code: string, id: string) {\n  try {\n    await navigator.clipboard.writeText(code)\n    copied.value = id\n    setTimeout(() => (copied.value = ''), 1600)\n  } catch {\n    // Clipboard blocked: the sample stays selectable by hand.\n  }\n}\n</script>\n\n<template>\n  <section data-slot=\"code-tabs-multi-language\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-3xl px-6 py-20\">\n      <Badge variant=\"secondary\">API</Badge>\n      <h2 class=\"mt-4 text-2xl font-semibold tracking-tight\">Read a certified metric in three lines</h2>\n      <p class=\"text-muted-foreground mt-2\">\n        The same definition the dashboards use. Scope is applied from the caller's token, not the query.\n      </p>\n\n      <Tabs default-value=\"curl\" class=\"mt-6\">\n        <TabsList variant=\"segmented\" class=\"flex-nowrap overflow-x-auto\">\n          <TabsTrigger v-for=\"sample in samples\" :key=\"sample.id\" :value=\"sample.id\" variant=\"segmented\">\n            {{ sample.label }}\n          </TabsTrigger>\n        </TabsList>\n\n        <TabsContent v-for=\"sample in samples\" :key=\"sample.id\" :value=\"sample.id\" class=\"mt-4\">\n          <Card>\n            <CardContent class=\"p-0\">\n              <div class=\"border-border flex items-center gap-3 border-b px-4 py-2\">\n                <span class=\"text-muted-foreground font-mono text-xs\">GET /v1/metrics/revenue_net</span>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"ml-auto h-7 gap-1.5 text-xs\"\n                  :aria-label=\"`Copy the ${sample.label} sample`\"\n                  @click=\"copy(sample.code, sample.id)\"\n                >\n                  <Check v-if=\"copied === sample.id\" class=\"text-success size-3.5\" aria-hidden=\"true\" />\n                  <Copy v-else class=\"size-3.5\" aria-hidden=\"true\" />\n                  {{ copied === sample.id ? 'Copied' : 'Copy' }}\n                </Button>\n              </div>\n              <pre class=\"overflow-x-auto p-4 font-mono text-xs leading-relaxed\"><code>{{ sample.code }}</code></pre>\n            </CardContent>\n          </Card>\n        </TabsContent>\n      </Tabs>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CodeTabsMultiLanguage.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/tabs.json"
  ],
  "description": "Code sample switcher with a language tab row, a copy control reporting its own success state, and a caption line naming the endpoint the sample calls.",
  "categories": [
    "marketing"
  ]
}