Reusable Pagination Component

[jdgamble555]

I didn't see a lot of examples for this, but if you need a reusable pagination component that handles items and page in the URL, and reloads via the load functions.

<script lang="ts">
	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
	import { MediaQuery } from 'svelte/reactivity';
	import * as Pagination from '$lib/components/ui/pagination';
	import { page } from '$app/state';
	import { goto } from '$app/navigation';

	const isDesktop = new MediaQuery('(min-width: 768px)');

	const { count }: { count: number } = $props();

	const items = $derived(Number(page.url.searchParams.get('items')));
	const perPage = $derived(items || 10);
	const pageNumber = $derived(Number(page.url.searchParams.get('page')) || 1);
	const siblingCount = $derived(isDesktop.current ? 1 : 0);

	const onPageChange = (newPage: number) => {
		const params = new URLSearchParams();
		if (newPage !== 1) {
			params.set('page', newPage.toString());
		}
		if (items) {
			params.set('items', items.toString());
		}
		goto(params.toString() ? `?${params}` : '.', {
			invalidateAll: true
		});
	};
</script>

<Pagination.Root {count} {perPage} {siblingCount} page={pageNumber} class="my-5" {onPageChange}>
	{#snippet children({ pages, currentPage })}
		<Pagination.Content>
			<Pagination.Item>
				<Pagination.PrevButton>
					<ChevronLeftIcon class="size-4" />
					<span class="hidden sm:block">Previous</span>
				</Pagination.PrevButton>
			</Pagination.Item>
			{#each pages as page (page.key)}
				{#if page.type === 'ellipsis'}
					<Pagination.Item>
						<Pagination.Ellipsis />
					</Pagination.Item>
				{:else}
					<Pagination.Item>
						<Pagination.Link {page} isActive={currentPage === page.value}>
							{page.value}
						</Pagination.Link>
					</Pagination.Item>
				{/if}
			{/each}
			<Pagination.Item>
				<Pagination.NextButton>
					<span class="hidden sm:block">Next</span>
					<ChevronRightIcon class="size-4" />
				</Pagination.NextButton>
			</Pagination.Item>
		</Pagination.Content>
	{/snippet}
</Pagination.Root>

I just wish it worked via href... I might hack that one day.

J