Command Palette

<!--
  Day 20: Command palette

  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 -->
<div
  class="fixed inset-0 z-90 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 rounded-lg bg-white shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
    role="document"
  >
    <!-- Search Input -->
    <div class="relative rounded-t-lg bg-white/80 px-3.5 pt-3.5">
      <div
        class="flex w-full items-center gap-2 rounded-lg border border-gray-200 bg-white px-3.5 shadow-xs focus-within:border-gray-400 focus-within:ring-2 focus-within:ring-gray-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-6 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 placeholder:text-gray-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-72 overflow-auto rounded-b-lg bg-white/80 p-3.5"
      role="listbox"
    >
      <li role="option" tabindex="-1" aria-selected="false">
        <a
          href="javascript:void(0)"
          class="flex items-center justify-between gap-3 rounded-lg px-2.5 text-sm text-gray-600 hover:bg-indigo-600 hover:text-white"
        >
          <div class="grow py-2 font-medium">Create new file</div>
          <div class="flex-none text-xs font-semibold opacity-75">
            <span class="opacity-75">Ctrl</span> + <span>N</span>
          </div>
        </a>
      </li>
      <li role="option" tabindex="-1" aria-selected="false">
        <a
          href="javascript:void(0)"
          class="flex items-center justify-between gap-3 rounded-lg px-2.5 text-sm text-gray-600 hover:bg-indigo-600 hover:text-white"
        >
          <div class="grow py-2 font-medium">Create new folder</div>
          <div class="flex-none text-xs font-semibold opacity-75">
            <span class="opacity-75">Ctrl</span> + <span>F</span>
          </div>
        </a>
      </li>
      <li role="option" tabindex="-1" aria-selected="false">
        <a
          href="javascript:void(0)"
          class="flex items-center justify-between gap-3 rounded-lg px-2.5 text-sm text-gray-600 hover:bg-indigo-600 hover:text-white"
        >
          <div class="grow py-2 font-medium">Create new project</div>
          <div class="flex-none text-xs font-semibold opacity-75">
            <span class="opacity-75">Ctrl</span> + <span>P</span>
          </div>
        </a>
      </li>
      <li role="option" tabindex="-1" aria-selected="false">
        <a
          href="javascript:void(0)"
          class="flex items-center justify-between gap-3 rounded-lg px-2.5 text-sm text-gray-600 hover:bg-indigo-600 hover:text-white"
        >
          <div class="grow py-2 font-medium">Archive project</div>
          <div class="flex-none text-xs font-semibold opacity-75">
            <span class="opacity-75">Ctrl</span> + <span>A</span>
          </div>
        </a>
      </li>
      <li role="option" tabindex="-1" aria-selected="false">
        <a
          href="javascript:void(0)"
          class="flex items-center justify-between gap-3 rounded-lg px-2.5 text-sm text-gray-600 hover:bg-indigo-600 hover:text-white"
        >
          <div class="grow py-2 font-medium">Format code</div>
          <div class="flex-none text-xs font-semibold opacity-75">
            <span class="opacity-75">Ctrl</span> + <span>F</span>
          </div>
        </a>
      </li>
    </ul>
    <!-- END Listbox -->
  </div>
</div>
<!-- END Command Palette -->