gaiety/gaiety-life
1
0
Fork 0
Code Activity

Pagination

Browse source
This commit is contained in:
Ava Gaiety Wroten 2022-01-09 20:47:18 -06:00
parent f6b1ab7d48
commit 0ed71ae8be
1 changed files with 35 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
_includes/indexlayout.njk
View file

@ -14,7 +14,6 @@ pagination:
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<div class="relative bg-slate-700 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
<div class="absolute inset-0">
<div class="bg-slate-900 h-1/5 sm:h-2/5"></div>
@ -63,6 +62,41 @@ pagination:
</div>
{%- endfor -%}
</div>
<nav class="mt-8 border-t border-slate-800 px-4 flex items-center justify-between sm:px-0">
<div class="-mt-px w-0 flex-1 flex">
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}" class="border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm font-medium text-slate-300 hover:text-slate-100 hover:border-slate-100">
<!-- Heroicon name: solid/arrow-narrow-left -->
<svg class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
</svg>
Previous
</a>
{% endif %}
</div>
<div class="hidden md:-mt-px md:flex">
{%- for pageEntry in pagination.pages %}
<a
href="{{ pagination.hrefs[ loop.index0 ] }}"
class="{{ 'border-yellow-300 text-white' if page.url == pagination.hrefs[ loop.index0 ] else 'border-transparent text-slate-300'}} hover:text-slate-100 hover:border-slate-100 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium"
{% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %}
>
{{ loop.index }}
</a>
{%- endfor %}
</div>
<div class="-mt-px w-0 flex-1 flex justify-end">
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}" class="border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm font-medium text-slate-300 hover:text-slate-100 hover:border-slate-100">
Next
<!-- Heroicon name: solid/arrow-narrow-right -->
<svg class="ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
{% endif %}
</div>
</nav>
</div>
</div>
</body>