Code Generator Split Pane

<section
  class="mx-auto max-w-5xl 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);
  "
>
  <div class="flex flex-col md:flex-row">
    <!-- Left panel: Prompt + Settings -->
    <div
      class="flex w-full flex-col border-b md:w-80 md:border-b-0 md:border-r"
      style="border-color: var(--ws-code-generator-border)"
    >
      <!-- Prompt area -->
      <div class="flex-1 p-6">
        <h2 class="mb-4 text-sm font-semibold" style="color: var(--ws-code-generator-text)">Prompt</h2>
        <label for="code-gen-split-prompt" class="sr-only">Describe what you want to build</label>
        <textarea
          id="code-gen-split-prompt"
          rows="4"
          placeholder="Describe what you want to build..."
          class="w-full resize-none rounded-lg border p-3 text-sm outline-none transition focus:ring-2"
          style="border-color: var(--ws-code-generator-border); background: var(--ws-code-generator-bg); color: var(--ws-code-generator-text)"
        ></textarea>

        <!-- Settings -->
        <div class="mt-6 space-y-4">
          <div>
            <label class="mb-1.5 block text-xs font-medium" style="color: var(--ws-code-generator-text-soft)">Language</label>
            <div
              class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm"
              style="border-color: var(--ws-code-generator-border); color: var(--ws-code-generator-text)"
              role="listbox"
              aria-label="Language selector"
            >
              <span>TypeScript</span>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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="M19.5 8.25l-7.5 7.5-7.5-7.5" />
              </svg>
            </div>
          </div>
          <div>
            <label class="mb-1.5 block text-xs font-medium" style="color: var(--ws-code-generator-text-soft)">Framework</label>
            <div
              class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm"
              style="border-color: var(--ws-code-generator-border); color: var(--ws-code-generator-text)"
              role="listbox"
              aria-label="Framework selector"
            >
              <span>React</span>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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="M19.5 8.25l-7.5 7.5-7.5-7.5" />
              </svg>
            </div>
          </div>
        </div>

        <button
          type="button"
          class="mt-6 w-full rounded-lg px-4 py-2.5 text-sm font-medium transition hover:opacity-90"
          style="background: var(--ws-code-generator-action-bg); color: var(--ws-code-generator-action-text)"
        >
          Generate Code
        </button>
      </div>
    </div>

    <!-- Right panel: Code output -->
    <div class="flex flex-1 flex-col">
      <div class="bg-gray-950"> <!-- ws-ok -->
        <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">App.tsx</span> <!-- ws-ok -->
          <span class="rounded bg-gray-900 px-3 py-1 text-xs text-gray-500">utils.ts</span> <!-- ws-ok -->
        </div>
        <pre class="min-h-[320px] overflow-x-auto p-6 font-mono text-sm leading-relaxed"><code><span class="text-purple-400">import</span> <span class="text-gray-300">{ useState }</span> <span class="text-purple-400">from</span> <span class="text-green-400">'react'</span>

<span class="text-purple-400">export default function</span> <span class="text-yellow-300">App</span><span class="text-gray-300">() {</span>
  <span class="text-purple-400">const</span> <span class="text-gray-300">[</span><span class="text-blue-300">count</span><span class="text-gray-300">,</span> <span class="text-blue-300">setCount</span><span class="text-gray-300">]</span> <span class="text-gray-500">=</span> <span class="text-yellow-300">useState</span><span class="text-gray-300">(</span><span class="text-orange-300">0</span><span class="text-gray-300">)</span>

  <span class="text-purple-400">return</span> <span class="text-gray-300">(</span>
    <span class="text-blue-300">&lt;div</span> <span class="text-green-400">className</span><span class="text-gray-500">=</span><span class="text-green-400">"flex flex-col items-center gap-4 p-8"</span><span class="text-blue-300">&gt;</span>
      <span class="text-blue-300">&lt;h1</span> <span class="text-green-400">className</span><span class="text-gray-500">=</span><span class="text-green-400">"text-2xl font-bold"</span><span class="text-blue-300">&gt;</span><span class="text-gray-300">Counter: {count}</span><span class="text-blue-300">&lt;/h1&gt;</span>
      <span class="text-blue-300">&lt;button</span> <span class="text-green-400">onClick</span><span class="text-gray-500">=</span><span class="text-gray-300">{()</span> <span class="text-purple-400">=&gt;</span> <span class="text-yellow-300">setCount</span><span class="text-gray-300">(c</span> <span class="text-gray-500">=&gt;</span> <span class="text-gray-300">c + 1)}</span><span class="text-blue-300">&gt;</span>
        <span class="text-gray-300">Increment</span>
      <span class="text-blue-300">&lt;/button&gt;</span>
    <span class="text-blue-300">&lt;/div&gt;</span>
  <span class="text-gray-300">)</span>
<span class="text-gray-300">}</span></code></pre>
      </div>
    </div>
  </div>
</section>