<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