51 lines
1.4 KiB
Svelte
51 lines
1.4 KiB
Svelte
<script lang="ts">
|
||
import { afkPageSize } from '$lib/afk.js';
|
||
import Button from '../primitives/Button.svelte';
|
||
let {
|
||
total,
|
||
offset,
|
||
disabled = false,
|
||
onchange
|
||
}: {
|
||
total: number;
|
||
offset: number;
|
||
disabled?: boolean;
|
||
onchange: (offset: number) => void;
|
||
} = $props();
|
||
</script>
|
||
|
||
<nav class="pagination" aria-label="AFK results pagination">
|
||
<span role="status"
|
||
>{total ? offset + 1 : 0}–{Math.min(offset + afkPageSize, total)} of {total.toLocaleString()}
|
||
results</span
|
||
>
|
||
{#if total > afkPageSize}<div>
|
||
<Button
|
||
size="sm"
|
||
disabled={disabled || offset === 0}
|
||
onclick={() => onchange(offset - afkPageSize)}>Previous</Button
|
||
><Button
|
||
size="sm"
|
||
disabled={disabled || offset + afkPageSize >= total}
|
||
onclick={() => onchange(offset + afkPageSize)}>Next</Button
|
||
>
|
||
</div>{/if}
|
||
</nav>
|
||
|
||
<style>
|
||
.pagination {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-3);
|
||
padding-block: var(--space-3);
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-sm);
|
||
}
|
||
.pagination div {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
}
|
||
</style>
|