Refactor Pagination component to update page size in getStaticPaths

src/components/Pagination.astro

@@ -1,7 +1,4 @@
 ---
-import Next from "./Pagination/Next.astro";
-import Prev from "./Pagination/Prev.astro";
-
 type Props = {
 	readonly nextUrl?: string;
 	readonly prevUrl?: string;
@@ -12,13 +9,27 @@ const { nextUrl, prevUrl } = Astro.props;
 
 <style lang="scss">
 	div {
-		overflow: hidden;
-		padding: 3rem 0;
-		width: 100%;
+		text-align: center;
+	}
+
+	span {
+		margin: 0 2em;
 	}
 </style>
 
 <div>
-	{prevUrl && <Prev url={prevUrl} />}
-	{nextUrl && <Next url={nextUrl} />}
+	{
+		prevUrl && (
+			<span>
+				<a href={prevUrl}>&lt; Prev</a>
+			</span>
+		)
+	}
+	{
+		nextUrl && (
+			<span>
+				<a href={nextUrl}>Next &gt;</a>
+			</span>
+		)
+	}
 </div>

src/components/Pagination/Next.astro

@@ -1,18 +0,0 @@
----
-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

@@ -1,18 +0,0 @@
----
-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>

src/pages/[...page].astro

@@ -12,7 +12,7 @@ export const getStaticPaths = (async ({ paginate }) => {
 	posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
 
 	return paginate(posts, {
-		pageSize: 5,
+		pageSize: 10,
 	});
 }) satisfies GetStaticPaths;