Code Generation Panel UI Card

<div
  class="lg:col-span-7 md:p-12 overflow-hidden group flashlight-card aura-reveal bg-[#050505] pt-8 pr-8 pb-8 pl-8 relative"
  style="animation-delay: 100ms; --mouse-x: 5.7471923828125px; --mouse-y: 91.77130126953125px;">
  <div
    class="absolute top-0 right-0 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 pointer-events-none">
  </div>
  <div
    class="border border-white/10 bg-[#0A0A0A] w-full max-w-2xl mx-auto shadow-2xl relative z-10 flex flex-col h-full min-h-[400px]">
    <div class="flex justify-between items-center px-4 py-3 border-b border-white/10 bg-white/5">
      <div class="flex items-center gap-2">
        <iconify-icon icon="lucide:code" class="text-white" width="16"></iconify-icon>
        <span class="text-sm font-semibold text-white">Generate Types</span>
      </div>
      <iconify-icon icon="lucide:x" class="text-zinc-500 hover:text-white cursor-pointer" width="16"></iconify-icon>
    </div>
    <div class="px-4 pt-3 pb-0">
      <p class="text-xs text-zinc-500">Generate type definitions from the JSON payload.</p>
    </div>
    <div class="grid grid-cols-2 gap-4 p-4">
      <div class="flex flex-col gap-1.5">
        <label class="text-[10px] uppercase tracking-wider text-zinc-500 font-mono">Type Name</label>
        <div class="bg-black border border-white/10 text-zinc-300 text-sm p-2 flex items-center">ExampleDto</div>
      </div>
      <div class="flex flex-col gap-1.5">
        <label class="text-[10px] uppercase tracking-wider text-zinc-500 font-mono">Language</label>
        <div class="bg-black border border-white/10 text-white text-sm p-2 flex items-center justify-between">
          TypeScript Zod
          <iconify-icon icon="lucide:chevron-down" class="text-zinc-500" width="14"></iconify-icon>
        </div>
      </div>
    </div>
    <div class="px-4 pb-2 flex items-center justify-between">
      <div class="flex items-center gap-1.5 text-zinc-500 hover:text-zinc-300 cursor-pointer transition-colors">
        <iconify-icon icon="lucide:settings-2" width="14"></iconify-icon>
        <span class="text-xs">Show options</span>
      </div>
    </div>
    <div class="flex items-center justify-between px-4 py-2 mt-2">
      <span class="text-xs font-mono text-zinc-500 uppercase tracking-wider">Generated Types</span>
      <button class="flex items-center gap-1.5 px-2 py-1 border border-white/10 bg-white/5 text-xs text-white hover:bg-white/10 transition-colors">
                  <iconify-icon icon="lucide:copy" width="12"></iconify-icon>
                  Copy
               </button>
    </div>
    <div class="flex-1 bg-[#080808] border-t border-white/10 p-4 font-mono text-xs overflow-x-auto leading-relaxed">
      <div
        class="flex text-zinc-600 select-none pointer-events-none float-left mr-4 flex-col text-right pr-2 border-r border-white/5">
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span>
      </div>
      <div class="whitespace-pre text-zinc-300">
        <span class="text-blue-400">import</span> * <span class="text-blue-400">as</span> z
        <span class="text-blue-400">from</span> <span class="text-amber-700">"zod"</span>;

        <span class="text-blue-400">export const</span> <span class="text-emerald-300">LanguagesSchema</span> =
        z.<span class="text-yellow-200">enum</span>([
        <span class="text-amber-700">"Bosnian"</span>,
        <span class="text-amber-700">"Galician"</span>,
        <span class="text-amber-700">"Hindi"</span>,
        <span class="text-amber-700">"Icelandic"</span>,
        <span class="text-amber-700">"isiZulu"</span>,
        <span class="text-amber-700">"Maltese"</span>,
        <span class="text-amber-700">"Sesotho sa Leboa"</span>,
        <span class="text-amber-700">"Setswana"</span>,
        <span class="text-amber-700">"Sindhi"</span>,
        <span class="text-amber-700">"Uyghur"</span>,
        ]);

        <span class="text-blue-400">export type</span> <span class="text-emerald-300">Language</span> =
        z.<span class="text-yellow-200">infer</span>&lt;<span class="text-blue-400">typeof</span>
        <span class="text-emerald-300">LanguagesSchema</span>&gt;;

        <span class="text-blue-400">export const</span> <span class="text-emerald-300">ExampleDtoElementSchema</span> =
        z.<span class="text-yellow-200">object</span>({
        <span class="text-amber-700">"name"</span>: z.<span class="text-yellow-200">string</span>(),
        <span class="text-amber-700">"code"</span>: <span class="text-emerald-300">LanguagesSchema</span>
        });
      </div>
    </div>
  </div>
</div>