feat: pagination on archived rooms

src/lib/Pagination.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" generics="T">
+	let {
+		items,
+		itemsPerPage,
+		pageItems = $bindable()
+	}: { items: Array<T>; itemsPerPage: number; pageItems: Array<T> } = $props();
+
+	let currentPage = $state(0);
+	let pageIndexStart = $derived(currentPage * itemsPerPage);
+	let pageIndexEnd = $derived(Math.min(itemsPerPage * (currentPage + 1), items.length));
+
+	$effect(() => {
+		currentPage = Math.min(Math.max(currentPage, 0), ~~(items.length / itemsPerPage));
+		pageItems = items.slice(pageIndexStart, pageIndexEnd);
+	});
+</script>
+
+<div class="flex flex-col gap-2">
+	<p>
+		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>
+		Entries
+	</p>
+
+	<div class="flex divide-x divide-border">
+		<button class="rounded-bl-lg rounded-tl-lg text-light" onclick={() => currentPage--}
+			>Previous</button
+		>
+		<button class="rounded-br-lg rounded-tr-lg text-light" 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,15 +1,17 @@
 <script lang="ts">
+	import Pagination from '$lib/Pagination.svelte';
 	import Room from '$lib/Room.svelte';
 	import type { PageData } from './$types';
 
-	let props: { data: PageData } = $props();
+	let { data }: { data: PageData } = $props();
+	let { activeRooms, archivedRooms } = data;
 
-	let data = $state(props.data);
+	let paginationArchivedRooms = $state([]);
 </script>
 
-<div class="mb-16 space-y-8">
+<div class="mb-8 space-y-8">
 	<section>
-		<h1 class="text-4xl font-bold">yukiotoko webui</h1>
+		<h1 class="text-4xl font-bold text-light">yukiotoko webui</h1>
 		<p>a frontend redesign for <a href="http://yukiotoko.chara.lol/">yukiotoko</a></p>
 		<p class="text-sub">refresh the page to fetch newer yukiotoko data</p>
 	</section>
@@ -18,14 +20,14 @@
 <div class="flex flex-col gap-8">
 	<section class="flex flex-col gap-4">
 		<div>
-			<h1 class="text-2xl font-bold">
+			<h1 class="text-2xl font-bold text-light">
-				active rooms <span class="text-sub">({data.activeRooms.length})</span>
+				active rooms <span class="text-sub">({activeRooms.length})</span>
 			</h1>
 			<p class="text-sub">all of the currently matchmaking rooms</p>
 		</div>
 
 		<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
-			{#each data.activeRooms as activeRoom}
+			{#each activeRooms as activeRoom}
 				<Room room={activeRoom} />
 			{/each}
 		</div>
@@ -33,14 +35,16 @@
 
 	<section class="flex flex-col gap-4">
 		<div>
-			<h1 class="text-2xl font-bold">
+			<h1 class="text-2xl font-bold text-light">
 				archived rooms <span class="text-sub">({data.archivedRooms.length})</span>
 			</h1>
 			<p class="text-sub">rooms that were created from the last 24 hours</p>
 		</div>
 
+		<Pagination items={archivedRooms} itemsPerPage={20} bind:pageItems={paginationArchivedRooms} />
+
 		<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
-			{#each data.archivedRooms as archivedRoom}
+			{#each paginationArchivedRooms as archivedRoom}
 				<Room room={archivedRoom} />
 			{/each}
 		</div>