Pagination.astro

---
const {
  previousPage = '#',
  nextPage = '#',
  currentPage = '1',
  totalPages = '12'
} = Astro.props
---

<nav class="pagination" aria-label="Pagination">
  <ul class="pagination__list">
    <li>
      <a href="${previousPage}" aria-label="Previous page">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14 7-5 5 5 5"/></svg>
      </a>
    </li>
    <li>
      <span>Page {currentPage} of {totalPages}</span>
    </li>
    <li>
      <a href="${nextPage}" aria-label="Next page">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 7 5 5-5 5"/></svg>
      </a>
    </li>
  </ul>
</nav>

<style lang="scss" is:global>
  .pagination {
    .pagination__list {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
      
    a {
      display: block;
      border: 2px solid currentColor;
      border-radius: 3px;
      transition: background-color 0.15s ease-in-out;

      &:hover,
      &:focus-visible {
        background-color: orange;

        svg path {
          stroke: #222;
        }
      }
    }
  }
</style>