Code Language Switcher

<!-- CSS-only language switcher via hidden radio inputs -->
<div class="ws-code-preview overflow-hidden rounded-xl border border-[var(--ws-code-preview-border)]">

  <!-- Hidden radio inputs for tab state -->
  <input type="radio" name="lang-tab" id="lt-curl" class="peer/curl sr-only" checked>
  <input type="radio" name="lang-tab" id="lt-python" class="peer/python sr-only">
  <input type="radio" name="lang-tab" id="lt-ts" class="peer/ts sr-only">

  <!-- Tab bar -->
  <div class="flex items-center justify-between border-b border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-header-bg)] px-4">
    <div class="flex" role="tablist">
      <label for="lt-curl"
        class="cursor-pointer border-b-2 border-transparent px-4 py-3 text-xs font-medium text-slate-500 transition hover:text-slate-300 peer-checked/curl:border-sky-400 peer-checked/curl:text-sky-400"
        role="tab" aria-controls="lt-panel-curl">cURL</label>
      <label for="lt-python"
        class="cursor-pointer border-b-2 border-transparent px-4 py-3 text-xs font-medium text-slate-500 transition hover:text-slate-300 peer-checked/python:border-sky-400 peer-checked/python:text-sky-400"
        role="tab" aria-controls="lt-panel-python">Python</label>
      <label for="lt-ts"
        class="cursor-pointer border-b-2 border-transparent px-4 py-3 text-xs font-medium text-slate-500 transition hover:text-slate-300 peer-checked/ts:border-sky-400 peer-checked/ts:text-sky-400"
        role="tab" aria-controls="lt-panel-ts">TypeScript</label>
    </div>
    <!-- Copy button (static label for HTML preview) -->
    <button class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-slate-500 transition hover:bg-slate-700 hover:text-slate-300" aria-label="Copy code">
      <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/></svg>
      Copy
    </button>
  </div>

  <!-- Panel: cURL -->
  <div id="lt-panel-curl" role="tabpanel"
    class="hidden peer-checked/curl:block">
    <pre class="overflow-x-auto p-5 font-mono text-xs leading-relaxed text-[var(--ws-code-preview-text)]"><code><span class="text-slate-500">curl</span> https://api.mistral.ai/v1/chat/completions \
  <span class="text-sky-400">-H</span> <span class="text-amber-300">"Authorization: Bearer $MISTRAL_API_KEY"</span> \
  <span class="text-sky-400">-H</span> <span class="text-amber-300">"Content-Type: application/json"</span> \
  <span class="text-sky-400">-d</span> <span class="text-amber-300">'{
    "model": "mistral-large-latest",
    "messages": [
      {
        "role": "user",
        "content": "What is the best French cheese?"
      }
    ]
  }'</span></code></pre>
  </div>

  <!-- Panel: Python -->
  <div id="lt-panel-python" role="tabpanel"
    class="hidden peer-checked/python:block">
    <pre class="overflow-x-auto p-5 font-mono text-xs leading-relaxed text-[var(--ws-code-preview-text)]"><code><span class="text-sky-400">from</span> <span class="text-emerald-400">mistralai</span> <span class="text-sky-400">import</span> Mistral

client = Mistral(api_key=<span class="text-amber-300">"your-api-key"</span>)

response = client.chat.complete(
    model=<span class="text-amber-300">"mistral-large-latest"</span>,
    messages=[
        {
            <span class="text-amber-300">"role"</span>: <span class="text-amber-300">"user"</span>,
            <span class="text-amber-300">"content"</span>: <span class="text-amber-300">"What is the best French cheese?"</span>,
        }
    ],
)

<span class="text-sky-400">print</span>(response.choices[<span class="text-orange-400">0</span>].message.content)</code></pre>
  </div>

  <!-- Panel: TypeScript -->
  <div id="lt-panel-ts" role="tabpanel"
    class="hidden peer-checked/ts:block">
    <pre class="overflow-x-auto p-5 font-mono text-xs leading-relaxed text-[var(--ws-code-preview-text)]"><code><span class="text-sky-400">import</span> Mistral <span class="text-sky-400">from</span> <span class="text-amber-300">"@mistralai/mistralai"</span>;

<span class="text-sky-400">const</span> client = <span class="text-sky-400">new</span> <span class="text-emerald-400">Mistral</span>({ apiKey: process.env.<span class="text-slate-300">MISTRAL_API_KEY</span> });

<span class="text-sky-400">const</span> response = <span class="text-sky-400">await</span> client.chat.<span class="text-emerald-400">complete</span>({
  model: <span class="text-amber-300">"mistral-large-latest"</span>,
  messages: [
    {
      role: <span class="text-amber-300">"user"</span>,
      content: <span class="text-amber-300">"What is the best French cheese?"</span>,
    },
  ],
});

console.<span class="text-emerald-400">log</span>(response.choices[<span class="text-orange-400">0</span>].message.content);</code></pre>
  </div>

</div>