feat: allow passing page url param

src/lib/Pagination.svelte

@@ -2,10 +2,15 @@
 	let {
 		items,
 		itemsPerPage,
-		pageItems = $bindable()
+		pageItems = $bindable(),
-	}: { items: Array<T>; itemsPerPage: number; pageItems: Array<T> } = $props();
+		currentPage = 0
+	}: {
+		items: Array<T>;
+		itemsPerPage: number;
+		pageItems: Array<T>;
+		currentPage?: number;
+	} = $props();
 
-	let currentPage = $state(0);
 	let pageIndexStart = $derived(currentPage * itemsPerPage);
 	let pageIndexEnd = $derived(Math.min(itemsPerPage * (currentPage + 1), items.length));
 
@@ -20,21 +25,23 @@
 		showing <span class="font-bold text-light">{pageIndexStart + 1}</span> to
 		<span class="font-bold text-light">{pageIndexEnd}</span>
 		of <span class="font-bold text-light">{items.length}</span>
-		entires
+		entires (<button
+			class="font-bold text-light"
+			onclick={() => {
+				navigator.clipboard.writeText(`${window.location.href}?page=${currentPage + 1}`);
+				alert(`Copied to clipboard!`);
+			}}>page {currentPage + 1}</button
+		>)
 	</p>
 
 	<div class="flex divide-x divide-border">
-		<button class="rounded-bl-lg rounded-tl-lg text-light" onclick={() => currentPage--}
+		<button
-			>prev</button
+			class="rounded-bl-lg rounded-tl-lg bg-medium px-4 py-2 text-light transition hover:brightness-150"
+			onclick={() => currentPage--}>prev</button
 		>
-		<button class="rounded-br-lg rounded-tr-lg text-light" onclick={() => currentPage++}
+		<button
-			>next</button
+			class="rounded-br-lg rounded-tr-lg bg-medium px-4 py-2 text-light transition hover:brightness-150"
+			onclick={() => currentPage++}>next</button
 		>
 	</div>
 </div>
-
-<style>
-	button {
-		@apply bg-medium px-4 py-2 transition hover:brightness-150;
-	}
-</style>

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { page } from '$app/state';
 	import Pagination from '$lib/Pagination.svelte';
 	import Room from '$lib/Room.svelte';
 	import type { PageData } from './$types';
@@ -43,7 +44,12 @@
 			<p class="text-sub">rooms that were created from the last 24 hours</p>
 		</div>
 
-		<Pagination items={archivedRooms} itemsPerPage={20} bind:pageItems={paginationArchivedRooms} />
+		<Pagination
+			items={archivedRooms}
+			itemsPerPage={20}
+			bind:pageItems={paginationArchivedRooms}
+			currentPage={(Number(page.url.searchParams.get('page')) ?? 1) - 1}
+		/>
 
 		<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
 			{#each paginationArchivedRooms as archivedRoom}