Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<script>
import { onMount } from 'svelte'
import { get } from '../data/api'
import Icon from './Icon'
export let collection
export let load
export let items = 20
let pages = {}
async function loadCollection(path) {
const { error, result, ...data } = await get(path, { items })
if (!error) {
collection = result
pages = data.pages
}
}
onMount(() => loadCollection(load))
</script>
{#if pages.total > 1}
<nav class="flex justify-between items-center">
<ul class="flex">
<li class="page-item">
<button
on:click={() => loadCollection(pages.first)}
disabled={pages.current == 1}>
<Icon name="angle-double-left" />
</button>
</li>
{#if pages.prev}
<li class="page-item ml-2">
<button on:click={() => loadCollection(pages.prev)}>
<Icon name="angle-left" />
</button>
</li>
{/if}
</ul>
<p class="text-gray-600">Page {pages.current} of {pages.total}</p>
<ul class="flex">
{#if pages.next}
<li class="page-item mr-2">
<button on:click={() => loadCollection(pages.next)}>
<Icon name="angle-right" />
</button>
</li>
{/if}
<li class="page-item">
<button
on:click={() => loadCollection(pages.last)}
disabled={pages.current == pages.total}>
<Icon name="angle-double-right" />
</button>
</li>
</ul>
</nav>
{/if}
<style lang="postcss">
.page-item {
@apply py-2;
button {
@apply bg-blue-200 h-8 w-8;
&:hover {
@apply bg-blue-300;
}
&[disabled] {
@apply opacity-25 bg-gray-300;
}
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment