This repository has been archived on 2025-03-28. You can view files and clone it, but you cannot make any changes to it's state, such as pushing and creating new issues, pull requests or comments.
coryd.dev-eleventy/src/_includes/paginator.liquid

46 lines
1.8 KiB
Text

<!--suppress HtmlFormInputWithoutLabel -->
<nav class="flex justify-between mt-8 items-center">
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}">
<button class="py-2 pr-4 text-purple-600 hover:text-purple-500 dark:hover:text-purple-400" aria-label="Previous page">
{% heroicon "solid" "arrow-left" "Previous" "width=20 height=20" %}
</button>
</a>
{% else %}
<button
class="py-2 pr-4 cursor-not-allowed disabled:opacity-50"
aria-label="Previous page (disabled)"
disabled>
{% heroicon "solid" "arrow-left" "Prevous" "width=20 height=20" %}
</button>
{% endif %}
<div class="flex flex-row items-center">
<select
id="pagination"
class="block cursor-pointer w-12 h-12 rounded-full text-white dark:text-gray-900 bg-purple-600 hover:bg-purple-500 dark:hover:bg-purple-400 mr-1 focus-visible:outline-none focus-visible:bg-purple-400 appearance-none text-center"
style="text-align-last:center">
{% for pageEntry in pagination.pages %}
<option {% if page.url == pagination.hrefs[forloop.index0] %}selected{% endif %} value="{{ forloop.index }}">{{ forloop.index }}</option>
{% endfor %}
</select>
<span>
of {{ pagination.links.size }}</span>
</div>
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}">
<button class="py-2 pl-4 text-purple-600 hover:text-purple-500 dark:hover:text-purple-400" aria-label="Next page">
{% heroicon "solid" "arrow-right" "Next" "width=20 height=20" %}
</button>
</a>
{% else %}
<button
class="py-2 pl-4 cursor-not-allowed disabled:opacity-50"
aria-label="Next page (disabled)"
disabled>
{% heroicon "solid" "arrow-right" "Next" "width=20 height=20" %}
</button>
{% endif %}
</nav>