Astro Pagination Component

Pagination.astro

---
//require phosphor icon for arrow icons, or bring your own one!
import "@phosphor-icons/web/bold" 

const { page = [], slug = "unknownPageSlug" } = Astro.props
---
      
//Only show the component if there's more than 1 page
{
  page.lastPage >= 2 && (
    <nav
      class="flex items-center w-full justify-center"
      aria-label="Pagination"
    >
      <ul class="flex flex-row gap-6 text-lg">
        <li>
          {page.url.prev !== undefined ? (
            <a
              class="buttonActive"
              href={`/${slug}/`}
              aria-label="Go to the first page"
            >
              <i class="ph-bold ph-caret-double-left" />
            </a>
          ) : (
            <span class="disabled">
              <i class="ph-bold ph-caret-double-left" />
            </span>
          )}
        </li>
        <li>
          {page.url.prev !== undefined ? (
            <a href={page.url.prev} aria-label={`Go back to previous page`}>
              <i class="ph-bold ph-caret-left" />
            </a>
          ) : (
            <span class="disabled">
              <i class="ph-bold ph-caret-left" />
            </span>
          )}
        </li>

        <li class="">
          <p>
            Page {page.currentPage} of {page.lastPage}
          </p>
        </li>

        <li>
          {page.url.next !== undefined ? (
            <a href={page.url.next} aria-label={`Go to next page`}>
              <i class="ph-bold ph-caret-right" />
            </a>
          ) : (
            <span class="disabled">
              <i class="ph-bold ph-caret-right" />
            </span>
          )}
        </li>
        <li>
          {page.url.next !== undefined ? (
            <a
              href={`/${slug}/${page.lastPage}/`}
              aria-label="Go to the last page"
            >
              <i class="ph-bold ph-caret-double-right" />
            </a>
          ) : (
            <span class="disabled">
              <i class="ph-bold ph-caret-double-right" />
            </span>
          )}
        </li>
      </ul>
    </nav>
  )
}

<style>
  //Customise CSS here
  a,
  span {
    @apply border px-2 py-2 rounded hover:bg-neutral-100;
  }
  span {
    @apply text-neutral-300 hover:cursor-not-allowed;
  }
</style>