Code Generator Base

<section
  class="mx-auto max-w-3xl overflow-hidden rounded-2xl border shadow-md"
  style="
    --ws-code-generator-bg: oklch(0.985 0.002 75);
    --ws-code-generator-text: oklch(0.205 0.015 75);
    --ws-code-generator-text-soft: oklch(0.556 0.01 75);
    --ws-code-generator-border: oklch(0.885 0.008 75);
    --ws-code-generator-accent: oklch(0.588 0.16 250);
    --ws-code-generator-action-bg: oklch(0.588 0.16 250);
    --ws-code-generator-action-text: oklch(0.985 0.002 75);
    background: var(--ws-code-generator-bg);
    color: var(--ws-code-generator-text);
    border-color: var(--ws-code-generator-border);
  "
>
  <!-- Prompt input bar -->
  <div class="border-b px-6 py-4" style="border-color: var(--ws-code-generator-border)">
    <label for="code-gen-prompt" class="sr-only">Describe what you want to build</label>
    <div class="flex items-center gap-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" style="color: var(--ws-code-generator-text-soft)" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zm8.446-7.189L18 9.75l-.259-1.035a3.375 3.375 0 00-2.456-2.456L14.25 6l1.035-.259a3.375 3.375 0 002.456-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
      </svg>
      <input
        id="code-gen-prompt"
        type="text"
        placeholder="Describe what you want to build..."
        class="flex-1 bg-transparent text-sm outline-none placeholder:opacity-60"
        style="color: var(--ws-code-generator-text)"
      />
      <button
        type="button"
        class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition hover:opacity-90"
        style="background: var(--ws-code-generator-action-bg); color: var(--ws-code-generator-action-text)"
      >
        Generate
      </button>
    </div>
  </div>

  <!-- Code output area -->
  <div class="bg-gray-950"> <!-- ws-ok -->
    <!-- Filename tab -->
    <div class="flex items-center gap-2 border-b border-gray-800 px-4 py-2">
      <span class="rounded bg-gray-800 px-3 py-1 text-xs font-medium text-gray-300">index.ts</span> <!-- ws-ok -->
    </div>
    <!-- Code block -->
    <pre class="overflow-x-auto p-6 font-mono text-sm leading-relaxed"><code><span class="text-purple-400">import</span> <span class="text-gray-300">{ createApp }</span> <span class="text-purple-400">from</span> <span class="text-green-400">'./app'</span>

<span class="text-purple-400">const</span> <span class="text-blue-300">app</span> <span class="text-gray-500">=</span> <span class="text-yellow-300">createApp</span><span class="text-gray-300">({</span>
  <span class="text-blue-300">name</span><span class="text-gray-500">:</span> <span class="text-green-400">'My Project'</span><span class="text-gray-300">,</span>
  <span class="text-blue-300">port</span><span class="text-gray-500">:</span> <span class="text-orange-300">3000</span><span class="text-gray-300">,</span>
  <span class="text-blue-300">middleware</span><span class="text-gray-500">:</span> <span class="text-gray-300">[</span><span class="text-yellow-300">cors</span><span class="text-gray-300">(),</span> <span class="text-yellow-300">logger</span><span class="text-gray-300">()]</span>
<span class="text-gray-300">})</span>

<span class="text-purple-400">await</span> <span class="text-blue-300">app</span><span class="text-gray-300">.</span><span class="text-yellow-300">listen</span><span class="text-gray-300">()</span>
<span class="text-gray-500">// Server running on http://localhost:3000</span></code></pre>
  </div>

  <!-- Action bar -->
  <div
    class="flex items-center justify-between border-t px-6 py-3"
    style="border-color: var(--ws-code-generator-border)"
  >
    <p class="text-xs" style="color: var(--ws-code-generator-text-soft)">Generated 10 lines &middot; TypeScript</p>
    <div class="flex items-center gap-2">
      <button
        type="button"
        class="flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition hover:opacity-80"
        style="border-color: var(--ws-code-generator-border); color: var(--ws-code-generator-text)"
        aria-label="Copy code"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.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 01-.75.75H9.75a.75.75 0 01-.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 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
        </svg>
        Copy
      </button>
      <button
        type="button"
        class="flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition hover:opacity-80"
        style="border-color: var(--ws-code-generator-border); color: var(--ws-code-generator-text)"
        aria-label="Download code"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
        </svg>
        Download
      </button>
      <button
        type="button"
        class="flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition hover:opacity-80"
        style="border-color: var(--ws-code-generator-border); color: var(--ws-code-generator-text)"
        aria-label="New generation"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
        New
      </button>
    </div>
  </div>
</section>