Refactor Pagination component and add Next and Prev components

3 files changed, 43 insertions, 29 deletions

diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
index e9fbc69..cc85db7 100644
--- a/src/components/Pagination.astro
+++ b/src/components/Pagination.astro
@@ -1,4 +1,7 @@
 ---
+import Next from "./Pagination/Next.astro";
+import Prev from "./Pagination/Prev.astro";
+
 type Props = {
 	readonly prevUrl?: string;
 	readonly nextUrl?: string;
@@ -8,39 +11,14 @@ const { prevUrl, nextUrl } = Astro.props;
 ---
 
 <style lang="scss">
-	.pagination {
+	div {
 		overflow: hidden;
 		padding: 3rem 0;
 		width: 100%;
 	}
-
-	.prev,
-	.next {
-		max-width: 40%;
-	}
-
-	.prev {
-		float: left;
-	}
-
-	.next {
-		float: right;
-	}
 </style>
 
-<div class="pagination">
-	{
-		prevUrl && (
-			<span class="prev">
-				<a href={prevUrl}>&lt; Prev</a>
-			</span>
-		)
-	}
-	{
-		nextUrl && (
-			<span class="next">
-				<a href={nextUrl}>Next &gt;</a>
-			</span>
-		)
-	}
+<div>
+	{prevUrl && <Prev url={prevUrl} />}
+	{nextUrl && <Next url={nextUrl} />}
 </div>
diff --git a/src/components/Pagination/Next.astro b/src/components/Pagination/Next.astro
new file mode 100644
index 0000000..1a95710
--- /dev/null
+++ b/src/components/Pagination/Next.astro
@@ -0,0 +1,18 @@
+---
+type Props = {
+	readonly url: string;
+};
+
+const { url } = Astro.props;
+---
+
+<style lang="scss">
+	span {
+		float: right;
+		max-width: 40%;
+	}
+</style>
+
+<span>
+	<a href={url}>Next &gt;</a>
+</span>
diff --git a/src/components/Pagination/Prev.astro b/src/components/Pagination/Prev.astro
new file mode 100644
index 0000000..2454876
--- /dev/null
+++ b/src/components/Pagination/Prev.astro
@@ -0,0 +1,18 @@
+---
+type Props = {
+	readonly url: string;
+};
+
+const { url } = Astro.props;
+---
+
+<style lang="scss">
+	span {
+		float: left;
+		max-width: 40%;
+	}
+</style>
+
+<span>
+	<a href={url}>&lt; Prev</a>
+</span>