commit

el3um4s · Mar 4, 2024 · 34c9ae7 · 34c9ae7
1 parent 8b50679
commit 34c9ae7
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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> -->