Code Generation Preview Card with Zod Schema

<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: 7.7471923828125px; --mouse-y: 19.86224365234375px;">
  <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 overflow-x-auto leading-relaxed text-xs font-mono bg-[#080808] border-white/10 border-t p-4">
      <div class="grid grid-cols-[auto_1fr] gap-x-4">
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">1</div>
        <div class="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>;</div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">2</div>
        <div class="text-zinc-300"></div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">3</div>
        <div class="text-zinc-300"><span class="text-blue-400">export const</span>
          <span class="text-emerald-300">LanguagesSchema</span> = z.<span class="text-yellow-200">enum</span>([</div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">4</div>
        <div class="text-zinc-300"> <span class="text-amber-700">"Bosnian"</span>,</div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">5</div>
        <div class="text-zinc-300"> <span class="text-amber-700">"Galician"</span>,</div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">6</div>
        <div class="text-zinc-300"> <span class="text-amber-700">"Hindi"</span>,</div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">7</div>
        <div class="text-zinc-300"> <span class="text-amber-700">"Icelandic"</span>,</div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">8</div>
        <div class="text-zinc-300"> <span class="text-amber-700">"isiZulu"</span>,</div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">9</div>
        <div class="text-zinc-300"> <span class="text-amber-700">"Maltese"</span>,</div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">10</div>
        <div class="text-zinc-300">]);</div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">11</div>
        <div class="text-zinc-300"></div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">12</div>
        <div class="text-zinc-300"><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;;</div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">13</div>
        <div class="text-zinc-300"></div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">14</div>
        <div class="text-zinc-300"><span class="text-blue-400">export const</span>
          <span class="text-emerald-300">ExampleDtoElementSchema</span> =
          z.<span class="text-yellow-200">object</span>({</div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">15</div>
        <div class="text-zinc-300"> <span class="text-amber-700">"name"</span>:
          z.<span class="text-yellow-200">string</span>(),</div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">16</div>
        <div class="text-zinc-300"> <span class="text-amber-700">"code"</span>:
          <span class="text-emerald-300">LanguagesSchema</span></div>
        <div class="text-zinc-600 select-none text-right pr-2 border-r border-white/5">17</div>
        <div class="text-zinc-300">});</div>
      </div>
    </div>
  </div>
</div>