{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-tabs-multi-language",
  "title": "Code — Multi-Language Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/code-tabs-multi-language/CodeTabsMultiLanguage.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Check, Copy } from 'lucide-react'\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\nexport function CodeTabsMultiLanguage() {\n  const [copied, setCopied] = useState('')\n\n  async function copy(code: string, id: string) {\n    try {\n      await navigator.clipboard.writeText(code)\n      setCopied(id)\n      setTimeout(() => setCopied(''), 1600)\n    } catch {\n      // Clipboard blocked: the sample stays selectable by hand.\n    }\n  }\n\n  return (\n    <section data-slot=\"code-tabs-multi-language\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-3xl px-6 py-20\">\n        <Badge variant=\"secondary\">API</Badge>\n        <h2 className=\"mt-4 text-2xl font-semibold tracking-tight\">Read a certified metric in three lines</h2>\n        <p className=\"text-muted-foreground mt-2\">\n          The same definition the dashboards use. Scope is applied from the caller&apos;s token, not the query.\n        </p>\n\n        <Tabs defaultValue=\"curl\" className=\"mt-6\">\n          <TabsList variant=\"segmented\" className=\"flex-nowrap overflow-x-auto\">\n            {samples.map((sample) => (\n              <TabsTrigger key={sample.id} value={sample.id} variant=\"segmented\">\n                {sample.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n\n          {samples.map((sample) => (\n            <TabsContent key={sample.id} value={sample.id} className=\"mt-4\">\n              <Card>\n                <CardContent className=\"p-0\">\n                  <div className=\"border-border flex items-center gap-3 border-b px-4 py-2\">\n                    <span className=\"text-muted-foreground font-mono text-xs\">GET /v1/metrics/revenue_net</span>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"ml-auto h-7 gap-1.5 text-xs\"\n                      aria-label={`Copy the ${sample.label} sample`}\n                      onClick={() => copy(sample.code, sample.id)}\n                    >\n                      {copied === sample.id ? (\n                        <Check className=\"text-success size-3.5\" aria-hidden=\"true\" />\n                      ) : (\n                        <Copy className=\"size-3.5\" aria-hidden=\"true\" />\n                      )}\n                      {copied === sample.id ? 'Copied' : 'Copy'}\n                    </Button>\n                  </div>\n                  <pre className=\"overflow-x-auto p-4 font-mono text-xs leading-relaxed\">\n                    <code>{sample.code}</code>\n                  </pre>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          ))}\n        </Tabs>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/CodeTabsMultiLanguage.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/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"
  ]
}