diff options
Diffstat (limited to 'templates/partials/shared/paginator.html')
| -rw-r--r-- | templates/partials/shared/paginator.html | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/templates/partials/shared/paginator.html b/templates/partials/shared/paginator.html new file mode 100644 index 0000000..470d411 --- /dev/null +++ b/templates/partials/shared/paginator.html @@ -0,0 +1,40 @@ +{% if paginator.previous or paginator.next %} +<section class="section"> + <div class="container max-w-5xl mx-auto flex items-center justify-center"> + <nav class="pagination flex items-center my-12 text-garage-gray" role="navigation" aria-label="pagination"> + {% if paginator.previous %} + <a class="flex items-center justify-center space-x-2 hover:text-garage-orange" + href='{{ paginator.previous }}' {% if not paginator.previous %}disabled{% endif %}> + <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" + xmlns="http://www.w3.org/2000/svg"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" + d="M7 16l-4-4m0 0l4-4m-4 4h18"></path> + </svg> + <span>Prev</span> + </a> + {% endif %} + <ul class="flex space-x-4 px-4"> + {% for pager in range(start=1, end=paginator.number_pagers+1) %} + <li> + <a class="font-semibold inline-flex items-center justify-center h-7 w-7 rounded hover:shadow hover:bg-garage-orange bg-garage-gray bg-opacity-20 border-b-2 {% if paginator.current_index == pager %}border-garage-orange{% else %}border-transparent{% endif %}" + href='{{ paginator.base_url }}{{pager}}' aria-label="Goto page {{pager}}"> + {{pager}} + </a> + </li> + {% endfor %} + </ul> + {% if paginator.next %} + <a class="flex items-center justify-center space-x-2 hover:text-garage-orange" href='{{ paginator.next }}' + {% if not paginator.next %}disabled{% endif %}> + <span>Next</span> + <svg class="mt-0.5 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" + xmlns="http://www.w3.org/2000/svg"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"> + </path> + </svg> + </a> + {% endif %} + </nav> + </div> +</section> +{% endif %}
\ No newline at end of file |