Pagination

<!--
  Day 126: Pagination

  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
-->

<!-- Pagination -->
<div class="mx-auto flex w-full max-w-2xl flex-col gap-8">
  <!-- Numbered Pagination -->
  <nav
    aria-label="Pagination"
    class="flex items-center justify-between gap-3 rounded-2xl bg-white p-2 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
  >
    <a
      href="javascript:void(0)"
      class="inline-flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        aria-hidden="true"
        class="hi-micro hi-chevron-left inline-block size-4"
      >
        <path
          fill-rule="evenodd"
          d="M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z"
          clip-rule="evenodd"
        />
      </svg>
      <span>Previous</span>
    </a>
    <p class="text-sm font-medium text-zinc-600 sm:hidden">
      Page <span class="font-semibold text-zinc-900">3</span>
      <span class="text-zinc-400">/</span> 12
    </p>
    <ol class="hidden items-center gap-1 sm:flex">
      <li>
        <a
          href="javascript:void(0)"
          aria-label="Page 1"
          class="flex size-9 items-center justify-center rounded-xl text-sm font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
        >
          1
        </a>
      </li>
      <li>
        <a
          href="javascript:void(0)"
          aria-label="Page 2"
          class="flex size-9 items-center justify-center rounded-xl text-sm font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
        >
          2
        </a>
      </li>
      <li>
        <a
          href="javascript:void(0)"
          aria-current="page"
          aria-label="Page 3, current page"
          class="flex size-9 items-center justify-center rounded-xl bg-zinc-900 text-sm font-semibold text-white"
        >
          3
        </a>
      </li>
      <li>
        <a
          href="javascript:void(0)"
          aria-label="Page 4"
          class="flex size-9 items-center justify-center rounded-xl text-sm font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
        >
          4
        </a>
      </li>
      <li class="hidden sm:list-item">
        <a
          href="javascript:void(0)"
          aria-label="Page 5"
          class="flex size-9 items-center justify-center rounded-xl text-sm font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
        >
          5
        </a>
      </li>
      <li class="hidden sm:list-item" aria-hidden="true">
        <span
          class="flex size-9 items-center justify-center text-sm text-zinc-400"
        >
          ...
        </span>
      </li>
      <li class="hidden sm:list-item">
        <a
          href="javascript:void(0)"
          aria-label="Page 12"
          class="flex size-9 items-center justify-center rounded-xl text-sm font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
        >
          12
        </a>
      </li>
    </ol>
    <a
      href="javascript:void(0)"
      class="inline-flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
    >
      <span>Next</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        aria-hidden="true"
        class="hi-micro hi-chevron-right inline-block size-4"
      >
        <path
          fill-rule="evenodd"
          d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
          clip-rule="evenodd"
        />
      </svg>
    </a>
  </nav>
  <!-- END Numbered Pagination -->

  <!-- Compact Pagination -->
  <nav
    aria-label="Pagination"
    class="flex items-center justify-between gap-3 rounded-2xl bg-white p-2 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
  >
    <a
      href="javascript:void(0)"
      class="inline-flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        aria-hidden="true"
        class="hi-micro hi-chevron-left inline-block size-4"
      >
        <path
          fill-rule="evenodd"
          d="M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z"
          clip-rule="evenodd"
        />
      </svg>
      <span>Previous</span>
    </a>
    <p class="hidden text-sm text-zinc-600 sm:block">
      Showing <span class="font-semibold text-zinc-900">21</span> to
      <span class="font-semibold text-zinc-900">30</span> of
      <span class="font-semibold text-zinc-900">248</span>
    </p>
    <p class="text-sm font-medium text-zinc-600 sm:hidden">
      Page <span class="font-semibold text-zinc-900">3</span>
      <span class="text-zinc-400">/</span> 25
    </p>
    <a
      href="javascript:void(0)"
      class="inline-flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
    >
      <span>Next</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        aria-hidden="true"
        class="hi-micro hi-chevron-right inline-block size-4"
      >
        <path
          fill-rule="evenodd"
          d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
          clip-rule="evenodd"
        />
      </svg>
    </a>
  </nav>
  <!-- END Compact Pagination -->

  <!-- Jump Pagination -->
  <nav
    aria-label="Pagination"
    class="flex items-center justify-between gap-3 rounded-2xl bg-white p-2 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
  >
    <div class="inline-flex items-center gap-1">
      <a
        href="javascript:void(0)"
        aria-label="First page"
        class="hidden size-9 items-center justify-center rounded-xl text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 sm:flex"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          aria-hidden="true"
          class="hi-micro hi-chevron-double-left inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M13.78 4.22a.75.75 0 0 1 0 1.06L11.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L9.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Zm-6 0a.75.75 0 0 1 0 1.06L5.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L3.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z"
            clip-rule="evenodd"
          />
        </svg>
      </a>
      <a
        href="javascript:void(0)"
        aria-label="Previous page"
        class="flex size-9 items-center justify-center rounded-xl text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          aria-hidden="true"
          class="hi-micro hi-chevron-left inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z"
            clip-rule="evenodd"
          />
        </svg>
      </a>
    </div>
    <label class="flex items-center gap-2 text-sm font-medium text-zinc-600">
      <span class="hidden sm:inline">Go to</span>
      <input
        type="number"
        min="1"
        max="25"
        value="3"
        aria-label="Page number"
        class="w-12 rounded-xl bg-zinc-100 px-2 py-1.5 text-center text-sm font-semibold text-zinc-900 focus:bg-white focus:ring-2 focus:ring-zinc-900 focus:outline-hidden"
      />
      <span class="text-zinc-400">of 25</span>
    </label>
    <div class="inline-flex items-center gap-1">
      <a
        href="javascript:void(0)"
        aria-label="Next page"
        class="flex size-9 items-center justify-center rounded-xl text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          aria-hidden="true"
          class="hi-micro hi-chevron-right inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
            clip-rule="evenodd"
          />
        </svg>
      </a>
      <a
        href="javascript:void(0)"
        aria-label="Last page"
        class="hidden size-9 items-center justify-center rounded-xl text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 sm:flex"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          aria-hidden="true"
          class="hi-micro hi-chevron-double-right inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M2.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 1 1-1.06-1.06L4.94 8 2.22 5.28a.75.75 0 0 1 0-1.06Zm6 0a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 1 1-1.06-1.06L10.94 8 8.22 5.28a.75.75 0 0 1 0-1.06Z"
            clip-rule="evenodd"
          />
        </svg>
      </a>
    </div>
  </nav>
  <!-- END Jump Pagination -->
</div>
<!-- END Pagination -->