Command Palette 2

<!--
  Day 110: Command palette 2

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Command Palette 2 -->
<div
  class="fixed inset-0 z-90 flex flex-col items-center justify-center overflow-x-hidden overflow-y-auto p-4 md:py-8 lg:px-8 lg:py-16"
  tabindex="-1"
  role="dialog"
  aria-modal="true"
>
  <div
    class="mx-auto flex w-full max-w-lg flex-col gap-2.5 rounded-3xl bg-white p-2.5 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
    role="document"
  >
    <div
      class="flex flex-col gap-2.5 rounded-2xl border border-zinc-100 bg-zinc-50 p-2.5"
    >
      <!-- Search Input -->
      <div class="relative">
        <div
          class="flex w-full items-center gap-2 rounded-xl border border-zinc-200 bg-white px-3.5 shadow-xs focus-within:border-zinc-400 focus-within:ring-4 focus-within:ring-zinc-300 focus-within:outline-hidden"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            data-slot="icon"
            class="hi-solid hi-magnifying-glass inline-block size-5 opacity-50"
          >
            <path
              fill-rule="evenodd"
              d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z"
              clip-rule="evenodd"
            />
          </svg>
          <input
            type="text"
            class="w-full border-none bg-transparent py-3 pl-0 text-sm placeholder:text-zinc-500 focus:ring-0 focus:outline-hidden"
            placeholder="Search.."
            tabindex="0"
            role="combobox"
            aria-expanded="true"
            aria-autocomplete="list"
          />
        </div>
      </div>
      <!-- EMD Search Input -->

      <!-- Listbox -->
      <ul class="max-h-96 overflow-auto" role="listbox">
        <li role="option" tabindex="-1" aria-selected="false">
          <a
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-3 rounded-xl px-2.5 text-sm text-zinc-600 hover:bg-zinc-200/50 hover:text-zinc-950 active:opacity-75"
          >
            <div class="grow py-2 font-medium">Open settings</div>
            <div
              class="flex-none text-xs font-semibold opacity-75 group-hover:text-indigo-600"
            >
              <span class="opacity-75">Ctrl</span> + <span>,</span>
            </div>
          </a>
        </li>
        <li role="option" tabindex="-1" aria-selected="false">
          <a
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-3 rounded-xl px-2.5 text-sm text-zinc-600 hover:bg-zinc-200/50 hover:text-zinc-950 active:opacity-75"
          >
            <div class="grow py-2 font-medium">Toggle sidebar</div>
            <div
              class="flex-none text-xs font-semibold opacity-75 group-hover:text-indigo-600"
            >
              <span class="opacity-75">Ctrl</span> + <span>B</span>
            </div>
          </a>
        </li>
        <li role="option" tabindex="-1" aria-selected="false">
          <a
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-3 rounded-xl px-2.5 text-sm text-zinc-600 hover:bg-zinc-200/50 hover:text-zinc-950 active:opacity-75"
          >
            <div class="grow py-2 font-medium">Run build</div>
            <div
              class="flex-none text-xs font-semibold opacity-75 group-hover:text-indigo-600"
            >
              <span class="opacity-75">Ctrl</span> + <span>Shift</span> +
              <span>B</span>
            </div>
          </a>
        </li>
        <li role="option" tabindex="-1" aria-selected="false">
          <a
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-3 rounded-xl px-2.5 text-sm text-zinc-600 hover:bg-zinc-200/50 hover:text-zinc-950 active:opacity-75"
          >
            <div class="grow py-2 font-medium">Debug application</div>
            <div
              class="flex-none text-xs font-semibold opacity-75 group-hover:text-indigo-600"
            >
              <span>F5</span>
            </div>
          </a>
        </li>
        <li role="option" tabindex="-1" aria-selected="false">
          <a
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-3 rounded-xl px-2.5 text-sm text-zinc-600 hover:bg-zinc-200/50 hover:text-zinc-950 active:opacity-75"
          >
            <div class="grow py-2 font-medium">Open terminal</div>
            <div
              class="flex-none text-xs font-semibold opacity-75 group-hover:text-indigo-600"
            >
              <span class="opacity-75">Ctrl</span> + <span>`</span>
            </div>
          </a>
        </li>
        <li role="option" tabindex="-1" aria-selected="false">
          <a
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-3 rounded-xl px-2.5 text-sm text-zinc-600 hover:bg-zinc-200/50 hover:text-zinc-950 active:opacity-75"
          >
            <div class="grow py-2 font-medium">Git commit</div>
            <div
              class="flex-none text-xs font-semibold opacity-75 group-hover:text-indigo-600"
            >
              <span class="opacity-75">Ctrl</span> + <span>Enter</span>
            </div>
          </a>
        </li>
        <li role="option" tabindex="-1" aria-selected="false">
          <a
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-3 rounded-xl px-2.5 text-sm text-zinc-600 hover:bg-zinc-200/50 hover:text-zinc-950 active:opacity-75"
          >
            <div class="grow py-2 font-medium">Find and replace</div>
            <div
              class="flex-none text-xs font-semibold opacity-75 group-hover:text-indigo-600"
            >
              <span class="opacity-75">Ctrl</span> + <span>H</span>
            </div>
          </a>
        </li>
        <li role="option" tabindex="-1" aria-selected="false">
          <a
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-3 rounded-xl px-2.5 text-sm text-zinc-600 hover:bg-zinc-200/50 hover:text-zinc-950 active:opacity-75"
          >
            <div class="grow py-2 font-medium">Switch theme</div>
            <div
              class="flex-none text-xs font-semibold opacity-75 group-hover:text-indigo-600"
            >
              <span class="opacity-75">Ctrl</span> + <span>K</span> +
              <span>T</span>
            </div>
          </a>
        </li>
        <li role="option" tabindex="-1" aria-selected="false">
          <a
            href="javascript:void(0)"
            class="group flex items-center justify-between gap-3 rounded-xl px-2.5 text-sm text-zinc-600 hover:bg-zinc-200/50 hover:text-zinc-950 active:opacity-75"
          >
            <div class="grow py-2 font-medium">Export project</div>
            <div
              class="flex-none text-xs font-semibold opacity-75 group-hover:text-indigo-600"
            >
              <span class="opacity-75">Ctrl</span> + <span>Shift</span> +
              <span>E</span>
            </div>
          </a>
        </li>
      </ul>
      <!-- END Listbox -->
    </div>
  </div>
</div>
<!-- END Command Palette 2 -->