web/wp-content/themes/mozilla-builders/templates/components/pagination.twig

{#
---------------------------------------------------------------------------
Pagination
---------------------------------------------------------------------------
#}

{% if pagination.pages %}
<nav class="grid grid-site centered-page" role="navigation" aria-label="Pagination Navigation">
  {% set prev = pagination.prev %}
  {% set next = pagination.next %}

  <div class="border-t border-content pt-2 col-span-full flex justify-between gap-2.5">
    <div class="text-sm flex-1 flex justify-start">
      {% if prev %}
      <a href="{{ prev.link }}" aria-label="Previous Page" class="uppercase hocus:bg-action-focus hocus:text-action-focus-reverse">
        Previous
      </a>
      {% endif %}
    </div>

    <ul class="flex flex-wrap gap-2.5">
      {% for page_link in pagination.pages %}
      <li class="text-sm">
        {% if page_link.link %}
          <a href="{{ page_link.link }}" {% if page_link.current %}aria-current="page"{% endif %} aria-label="{{ 'Page ' ~ page_link.title }}" class="hocus:bg-action-focus hocus:text-action-focus-reverse">{{ page_link.title }}</a>
        {% else %}
          <span class="opacity-40" aria-label="{{ 'Page ' ~ page_link.title }}">{{ page_link.title }}</span>
        {% endif %}
      </li>
      {% endfor %}
    </ul>

    <div class="text-sm flex-1 flex justify-end">
      {% if next %}
      <a href="{{ next.link }}" aria-label="Next Page" class="uppercase hocus:bg-action-focus hocus:text-action-focus-reverse">
        Next
      </a>
      {% endif %}
    </div>
  </div>
</nav>
{% endif %}