From 34c9ae7b8a007e136c17c458d4883d07cdc59559 Mon Sep 17 00:00:00 2001
From: Samuele de Tomasi <el3um4s@gmail.com>
Date: Mon, 4 Mar 2024 22:43:26 +0100
Subject: [PATCH] commit

---
 src/css/tailwind.pcss                         | 12 ++++++++
 src/lib/components/custom/pagination.svelte   | 30 +++++++++++++++++++
 src/routes/+page.svelte                       | 13 ++++----
 .../category/[category]/[[page]]/+page.svelte | 12 ++++++--
 .../column/[column]/[[page]]/+page.svelte     | 13 ++++++--
 src/routes/page/[page]/+page.svelte           | 12 ++++++--
 6 files changed, 78 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/components/custom/pagination.svelte

diff --git a/src/css/tailwind.pcss b/src/css/tailwind.pcss
index ba45a12..dc7a312 100644
--- a/src/css/tailwind.pcss
+++ b/src/css/tailwind.pcss
@@ -73,6 +73,18 @@
 		}
 	}
 
+	.pagination {
+		@apply flex justify-between items-center px-4 py-3;
+
+		.showing-text {
+			@apply hidden sm:block;
+		}
+
+		.buttons {
+			@apply flex gap-2;
+		}
+	}
+
 	header {
 		@apply bg-white shadow-md sticky top-0 left-0 right-0 z-50 dark:bg-gray-800;
 		nav {
diff --git a/src/lib/components/custom/pagination.svelte b/src/lib/components/custom/pagination.svelte
new file mode 100644
index 0000000..a7281a8
--- /dev/null
+++ b/src/lib/components/custom/pagination.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	// let { data } = $props();
+	export let currentPage: number;
+	export let nextPage: number;
+	export let start: number;
+	export let end: number;
+	export let url: string;
+</script>
+
+<section class="pagination">
+	<div class="showing-text">
+		Showing <span class="semibold">{start}</span> to
+		<span class="semibold">{end}</span> results
+	</div>
+	<div class="buttons">
+		{#if currentPage >= 1}
+			<a href="{url}/{currentPage - 1}">Previous</a>
+		{/if}
+
+		{#if nextPage >= 1}
+			<a href="{url}/{nextPage}">Next</a>
+		{/if}
+	</div>
+</section>
+
+<style>
+	.semibold {
+		font-weight: 600;
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 219e3c8..e762305 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,6 +3,7 @@
 	import * as config from '$lib/config';
 
 	import PostPreview from '$lib/components/custom/post-preview.svelte';
+	import Pagination from '$lib/components/custom/pagination.svelte';
 	import type { Post } from '$lib/types';
 
 	// export let data;
@@ -42,20 +43,16 @@
 </section>
 
 <!-- Pagination -->
-<section class=" flex justify-between items-center px-4 py-3">
+<Pagination currentPage={0} nextPage={1} start={1} end={config.pagination} url="{config.url}/page"
+></Pagination>
+<!-- <section class=" flex justify-between items-center px-4 py-3">
 	<div class="hidden sm:block">
 		Showing <span class="font-semibold">1</span> to
 		<span class="font-semibold">{config.pagination}</span> results
 	</div>
 	<div class="flex gap-2">
-		<!-- {#if previousPage >= 0}
-			<button on:click={() => currentPage--}>Previous</button>
-		{/if}
-		{#if nextPage >= 0}
-			<button on:click={() => currentPage++}>Next</button>
-		{/if} -->
 		{#if nextPage}
 			<a href="{config.url}/page/1">Next</a>
 		{/if}
 	</div>
-</section>
+</section> -->
diff --git a/src/routes/category/[category]/[[page]]/+page.svelte b/src/routes/category/[category]/[[page]]/+page.svelte
index 159763f..2bcdbf3 100644
--- a/src/routes/category/[category]/[[page]]/+page.svelte
+++ b/src/routes/category/[category]/[[page]]/+page.svelte
@@ -3,6 +3,7 @@
 	import * as config from '$lib/config';
 
 	import PostPreview from '$lib/components/custom/post-preview.svelte';
+	import Pagination from '$lib/components/custom/pagination.svelte';
 
 	// export let data;
 	let { data } = $props();
@@ -27,7 +28,14 @@
 	</section>
 
 	<!-- Pagination -->
-	<section class=" flex justify-between items-center px-4 py-3">
+	<Pagination
+		currentPage={data.currentPage}
+		nextPage={data.nextPage}
+		start={data.start + 1}
+		end={data.end + 1}
+		url="{config.url}/category/{data.category}"
+	></Pagination>
+	<!-- <section class=" flex justify-between items-center px-4 py-3">
 		<div class="hidden sm:block">
 			Showing <span class="font-semibold">{data.start + 1}</span> to
 			<span class="font-semibold">{data.end + 1}</span> results
@@ -41,5 +49,5 @@
 				<a href="{config.url}/category/{data.category}/{data.nextPage}">Next</a>
 			{/if}
 		</div>
-	</section>
+	</section> -->
 {/if}
diff --git a/src/routes/column/[column]/[[page]]/+page.svelte b/src/routes/column/[column]/[[page]]/+page.svelte
index 7035257..e7446c9 100644
--- a/src/routes/column/[column]/[[page]]/+page.svelte
+++ b/src/routes/column/[column]/[[page]]/+page.svelte
@@ -2,6 +2,7 @@
 	import { slide } from 'svelte/transition';
 	import * as config from '$lib/config';
 	import PostPreview from '$lib/components/custom/post-preview.svelte';
+	import Pagination from '$lib/components/custom/pagination.svelte';
 
 	// export let data;
 	let { data } = $props();
@@ -26,7 +27,15 @@
 	</section>
 
 	<!-- Pagination -->
-	<section class=" flex justify-between items-center px-4 py-3">
+	<Pagination
+		currentPage={data.currentPage}
+		nextPage={data.nextPage}
+		start={data.start + 1}
+		end={data.end + 1}
+		url="{config.url}/column/{data.column}"
+	></Pagination>
+
+	<!-- <section class=" flex justify-between items-center px-4 py-3">
 		<div class="hidden sm:block">
 			Showing <span class="font-semibold">{data.start + 1}</span> to
 			<span class="font-semibold">{data.end + 1}</span> results
@@ -40,5 +49,5 @@
 				<a href="{config.url}/column/{data.column}/{data.nextPage}">Next</a>
 			{/if}
 		</div>
-	</section>
+	</section> -->
 {/if}
diff --git a/src/routes/page/[page]/+page.svelte b/src/routes/page/[page]/+page.svelte
index bc04915..c4c92d4 100644
--- a/src/routes/page/[page]/+page.svelte
+++ b/src/routes/page/[page]/+page.svelte
@@ -3,6 +3,7 @@
 	import * as config from '$lib/config';
 
 	import PostPreview from '$lib/components/custom/post-preview.svelte';
+	import Pagination from '$lib/components/custom/pagination.svelte';
 
 	// export let data;
 	let { data } = $props();
@@ -24,7 +25,14 @@
 </section>
 
 <!-- Pagination -->
-<section class=" flex justify-between items-center px-4 py-3">
+<Pagination
+	currentPage={data.currentPage}
+	nextPage={data.nextPage}
+	start={data.start + 1}
+	end={data.end + 1}
+	url="{config.url}/page"
+></Pagination>
+<!-- <section class=" flex justify-between items-center px-4 py-3">
 	<div class="hidden sm:block">
 		Showing <span class="font-semibold">{data.start + 1}</span> to
 		<span class="font-semibold">{data.end + 1}</span> results
@@ -40,4 +48,4 @@
 			<a href="{config.url}/page/{data.nextPage}">Next</a>
 		{/if}
 	</div>
-</section>
+</section> -->