Hubspot Blog Pagination TailwindCSS

Hubspot Blog Pagination Tailwind.html

{% if contents.total_page_count > 1 %}
<div class="blog-pagination clearfix flex items-center space-x-1">
  {% set page_list = [-2, -1, 0, 1, 2] %}
  {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
  {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
  {% elif current_page_num == 2 %}{% set offset = 1 %}
  {% elif current_page_num == 1 %}{% set offset = 2 %}
  {% else %}{% set offset = 0 %}{% endif %}

  {% if last_page_num %}
    <a class="flex items-center px-4 py-2 text-black bg-vop-gold no-underline rounded-md hover:bg-vop-gold-dark hover:text-black blog-pagination__link blog-pagination__prev-link {{ "blog-pagination__prev-link--disabled bg-vop-gold-dark" if !last_page_num }}"{% if !last_page_num %} {% else %} href="{{ blog_page_link(last_page_num) }}" {% endif %}>
      Previous 
    </a>
  {% endif %}

  {% for page in page_list %}
  {% set this_page = current_page_num + page + offset %}
    {% if this_page > 0 and this_page <= contents.total_page_count %}
      <a class="flex items-center px-4 py-2 text-black bg-vop-gold no-underline rounded-md hover:bg-vop-gold-dark hover:text-black blog-pagination__link blog-pagination__number-link {{ "blog-pagination__link--active bg-vop-gold-dark" if this_page == current_page_num }}" href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
    {% endif %}
  {% endfor %}

  {% if next_page_num %}
    <a class="flex items-center px-4 py-2 text-black bg-vop-gold no-underline rounded-md hover:bg-vop-gold-dark hover:text-black blog-pagination__link blog-pagination__next-link {{ "blog-pagination__next-link--disabled bg-vop-gold-dark" if !next_page_num }}" {% if !next_page_num %} {% else %}  href="{{ blog_page_link(current_page_num + 1) }}" {% endif %}>
      Next 
    </a>
  {% endif %}
</div>
{% endif %}