paginator, there is some need for a shared svelte component library now

src/admin-client/src/lib/Pager.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	export let page: number = 1;
+	export let itemCount: number = 0;
+	export let pageSize: number = 1;
+
+	interface PagerParams {
+		page: number;
+		pageCount: number;
+		pageSize: number;
+	}
+
+	export let createUrl: (
+		//<reference types="svelte" />
+		arg0: PagerParams
+	) => string = (): string => '';
+
+	$: pageCount = Math.max(1, Math.ceil(itemCount / pageSize));
+</script>
+
+<ol class="flex justify-between w-full center text-lg" style="padding: 0 10%;">
+	{#if page > 1}
+		<li in:fade>
+			<a href={createUrl({ page: page - 1, pageCount, pageSize })}> &lt;Previous </a>
+		</li>
+	{:else}
+		<li />
+	{/if}
+	<li>Page {page} of {pageCount}</li>
+	{#if page < pageCount}
+		<li in:fade>
+			<a href={createUrl({ page: page + 1, pageCount, pageSize })}> Next&gt; </a>
+		</li>
+	{:else}
+		<li />
+	{/if}
+</ol>

src/admin-client/src/routes/+page.svelte

@@ -3,6 +3,7 @@
 	import { fade } from 'svelte/transition';
 	import StartScrapeForm from '$lib/StartScrapeForm.svelte';
 	import ScrapeJobResult from '$lib/ScrapeJobResult.svelte';
+	import Pager from '$lib/Pager.svelte';
 
 	export let data: PageData;
 
@@ -28,10 +29,30 @@
 			console.log(scrapeJob);
 		} catch (error) {}
 	}
+
+	function buildQueryString({ page, pageSize }: { page: number; pageSize: number }): string {
+		const qs = [
+			data.query === '' ? data.query : `query=${data.query}`,
+			page <= 1 ? '' : `page=${page}`,
+			`limit=${pageSize}`
+		]
+			.filter((x) => x !== '')
+			.join('&');
+
+		return qs !== '' ? `?${qs}` : qs;
+	}
 </script>
 
 <section class="flex w-full flex-col justify-center" in:fade out:fade>
-	<h1 class="text-2xl mb-8">Sync Status</h1>
+	<section in:fade class="pb-10">
+		<h1 class="text-2xl pb-5 mb-8">Sync Status</h1>
+		<Pager
+			page={data.page}
+			itemCount={data.found}
+			pageSize={data.limit}
+			createUrl={buildQueryString}
+		/>
+	</section>
 	<div class="mb-8">
 		<StartScrapeForm on:scrape={onScrape} />
 	</div>
@@ -57,4 +78,13 @@
 			{/each}
 		</ul>
 	</section>
+
+	<section class="pt-10">
+		<Pager
+			page={data.page}
+			itemCount={data.found}
+			pageSize={data.limit}
+			createUrl={buildQueryString}
+		/>
+	</section>
 </section>

src/web-client/src/lib/Pager.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	export let page: number = 1;
+	export let itemCount: number = 0;
+	export let pageSize: number = 1;
+
+	interface PagerParams {
+		page: number;
+		pageCount: number;
+		pageSize: number;
+	}
+
+	export let createUrl: (
+		//<reference types="svelte" />
+		arg0: PagerParams
+	) => string = (): string => '';
+
+	$: pageCount = Math.max(1, Math.ceil(itemCount / pageSize));
+</script>
+
+<ol class="flex justify-between w-full center text-lg" style="padding: 0 10%;">
+	{#if page > 1}
+		<li in:fade>
+			<a href={createUrl({ page: page - 1, pageCount, pageSize })}> &lt;Previous </a>
+		</li>
+	{:else}
+		<li />
+	{/if}
+	<li>Page {page} of {pageCount}</li>
+	{#if page < pageCount}
+		<li in:fade>
+			<a href={createUrl({ page: page + 1, pageCount, pageSize })}> Next&gt; </a>
+		</li>
+	{:else}
+		<li />
+	{/if}
+</ol>

src/web-client/src/routes/+page.svelte

@@ -1,43 +1,35 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import AuctionResult from '$lib/AuctionResult.svelte';
+	import Pager from '$lib/Pager.svelte';
 	import { fade } from 'svelte/transition';
 
 	export let data: PageData;
 
-	function buildQueryString({ query, page }: { query: string; page: number }): string {
-		const qs = [query === '' ? query : `query=${query}`, page <= 1 ? '' : `page=${page}`]
+	function buildQueryString({ page, pageSize }: { page: number; pageSize: number }): string {
+		const qs = [
+			data.query === '' ? data.query : `query=${data.query}`,
+			page <= 1 ? '' : `page=${page}`,
+			`limit=${pageSize}`
+		]
 			.filter((x) => x !== '')
 			.join('&');
 
-		return qs !== '' ? `?${qs}` : qs;
+		return qs !== '' ? `/?${qs}` : qs;
 	}
 
-	$: hasResults = (data.results || []).length > 0;
-	$: currentPage = data.page + 1;
-	$: pageCount = Math.max(1, Math.ceil(data.found / data.limit));
+	$: hasResults = data?.results?.length || 0;
 </script>
 
 {#if hasResults}
 	<section in:fade>
 		<h1 class="pb-5 text-lg">Found {data.found} Upcoming & Live Auctions</h1>
-		<ol class="flex justify-between w-full center" style="padding: 0 10%;">
-			{#if currentPage > 1}
-				<li in:fade>
-					<a href="/{buildQueryString({ query: data.query, page: currentPage - 1 })}"
-						>&lt;Previous</a
-					>
-				</li>
-			{:else}
-				<li />
-			{/if}
-			<li>Page {currentPage} of {pageCount}</li>
-			{#if currentPage < pageCount}
-				<li in:fade>
-					<a href="/{buildQueryString({ query: data.query, page: currentPage + 1 })}">Next&gt;</a>
-				</li>
-			{/if}
-		</ol>
+		<Pager
+			page={data.page + 1}
+			itemCount={data.found}
+			pageSize={data.limit}
+			createUrl={buildQueryString}
+		/>
 	</section>
 
 	{#key data.results}
@@ -49,6 +41,13 @@
 			{/each}
 		</ul>
 	{/key}
+
+	<Pager
+		page={data.page + 1}
+		itemCount={data.found}
+		pageSize={data.limit}
+		createUrl={buildQueryString}
+	/>
 {:else}
 	<section class="flex w-full flex-col justify-center text-center" in:fade out:fade>
 		<h1 class="text-2xl">No auctions found.</h1>