{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "code-tabs-multi-language",
  "title": "Code — Multi-Language Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/code-tabs-multi-language/code-tabs-multi-language.component.ts",
      "content": "// Code sample switcher with a language tab row, a copy control reporting its own\n// success state, and a caption line naming the endpoint the sample calls.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, inject, Input, signal } from '@angular/core'\nimport { Check, Copy, LucideAngularModule } 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 {\n  UiTabsComponent,\n  UiTabsContentComponent,\n  UiTabsListComponent,\n  UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\nexport interface CodeSample {\n  id: string\n  label: string\n  code: string\n}\n\n// Samples are plain strings, so a highlighter can be layered on later without\n// touching this component.\nconst samples: CodeSample[] = [\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\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-code-tabs-multi-language, [ui-code-tabs-multi-language]',\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    UiTabsComponent,\n    UiTabsContentComponent,\n    UiTabsListComponent,\n    UiTabsTriggerComponent,\n  ],\n  template: `\n    <section data-slot=\"code-tabs-multi-language\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-3xl px-6 py-20\">\n        <span ui-badge variant=\"secondary\">API</span>\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        <ui-tabs defaultValue=\"curl\" class=\"mt-6\">\n          <ui-tabs-list variant=\"segmented\" class=\"flex-nowrap overflow-x-auto\">\n            @for (sample of samplesList; track sample.id) {\n              <button ui-tabs-trigger [value]=\"sample.id\" variant=\"segmented\">\n                {{ sample.label }}\n              </button>\n            }\n          </ui-tabs-list>\n\n          @for (sample of samplesList; track sample.id) {\n            <ui-tabs-content [value]=\"sample.id\" class=\"mt-4\">\n              <div ui-card>\n                <div ui-card-content 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                      ui-button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      class=\"ml-auto h-7 gap-1.5 text-xs\"\n                      [attr.aria-label]=\"'Copy the ' + sample.label + ' sample'\"\n                      (click)=\"copy(sample.code, sample.id)\"\n                    >\n                      @if (copied() === sample.id) {\n                        <lucide-icon [img]=\"Check\" class=\"text-success size-3.5\" aria-hidden=\"true\" />\n                      } @else {\n                        <lucide-icon [img]=\"Copy\" class=\"size-3.5\" aria-hidden=\"true\" />\n                      }\n                      {{ copied() === sample.id ? 'Copied' : 'Copy' }}\n                    </button>\n                  </div>\n                  <pre\n                    class=\"overflow-x-auto p-4 font-mono text-xs leading-relaxed\"\n                  ><code>{{ sample.code }}</code></pre>\n                </div>\n              </div>\n            </ui-tabs-content>\n          }\n        </ui-tabs>\n      </div>\n    </section>\n  `,\n})\nexport class UiCodeTabsMultiLanguageComponent {\n  protected readonly Check = Check\n  protected readonly Copy = Copy\n\n  protected readonly samplesList = samples\n\n  @Input('class') className?: string\n\n  readonly copied = signal('')\n  private copyTimer: ReturnType<typeof setTimeout> | undefined\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.copyTimer))\n  }\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n\n  async copy(code: string, id: string): Promise<void> {\n    try {\n      await navigator.clipboard.writeText(code)\n      this.copied.set(id)\n      clearTimeout(this.copyTimer)\n      this.copyTimer = setTimeout(() => this.copied.set(''), 1600)\n    } catch {\n      // Clipboard blocked: the sample stays selectable by hand.\n    }\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/code-tabs-multi-language/code-tabs-multi-language.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/code-tabs-multi-language/index.ts",
      "content": "export { UiCodeTabsMultiLanguageComponent, type CodeSample } from './code-tabs-multi-language.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/code-tabs-multi-language/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/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"
  ]
}