Refactor Pagination component and add Next and Prev components

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>

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>

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>