src/lib/components/Pagination.svelte at main

aparker.io / papili.one

fork atom

an atproto based link aggregator

fork atom

papili.one / src / lib / components / Pagination.svelte

at main 36 lines 793 B view raw

wrap content

aparker.io Add moderation, profiles, polish, CI, and switch to migrations 3mo ago

2ec2cbad

 1<script lang="ts">
 2	interface Props {
 3		page: number;
 4		hasMore: boolean;
 5		baseUrl?: string;
 6	}
 7
 8	let { page, hasMore, baseUrl = '' }: Props = $props();
 9
10	// Build URL with page parameter
11	function getPageUrl(pageNum: number): string {
12		const separator = baseUrl.includes('?') ? '&' : '?';
13		return `${baseUrl}${separator}page=${pageNum}`;
14	}
15</script>
16
17{#if page > 1 || hasMore}
18	<nav class="mt-6 flex justify-center gap-4">
19		{#if page > 1}
20			<a
21				href={getPageUrl(page - 1)}
22				class="px-4 py-2 text-sm text-violet-600 dark:text-violet-400 hover:underline"
23			>
24				&larr; Newer
25			</a>
26		{/if}
27		{#if hasMore}
28			<a
29				href={getPageUrl(page + 1)}
30				class="px-4 py-2 text-sm text-violet-600 dark:text-violet-400 hover:underline"
31			>
32				Older &rarr;
33			</a>
34		{/if}
35	</nav>
36{/if}