Add PostPagination component for blog post navigation

src/components/PostPagination.astro

@@ -0,0 +1,47 @@
+---
+const { prevPost, nextPost } = Astro.props;
+---
+
+<style lang="scss">
+	.pagination {
+		overflow: hidden;
+		padding: 5rem 0;
+		width: 100%;
+	}
+
+	@media (width <=684px) {
+		.pagination {
+			padding: 2rem 0;
+		}
+	}
+
+	.prev,
+	.next {
+		max-width: 40%;
+	}
+
+	.prev {
+		float: left;
+	}
+
+	.next {
+		float: right;
+	}
+</style>
+
+<div class="pagination">
+	{
+		prevPost && (
+			<span class="prev">
+				<a href={`/blog/${prevPost.slug}`}>&lt; {prevPost.data.title}</a>
+			</span>
+		)
+	}
+	{
+		nextPost && (
+			<span class="next">
+				<a href={`/blog/${nextPost.slug}`}>{nextPost.data.title} &gt;</a>
+			</span>
+		)
+	}
+</div>

src/pages/blog/[...slug].astro

@@ -2,17 +2,24 @@
 import { type CollectionEntry, getCollection } from "astro:content";
 import Comments from "../../components/Comments.astro";
 import Layout from "../../layouts/PageLayout.astro";
+import Pagination from "../../components/PostPagination.astro";
 
 export async function getStaticPaths() {
 	const posts = await getCollection("blog");
-	return posts.map((post) => ({
+	const total = posts.length;
+
+	return posts.map((post, index) => ({
 		params: { slug: post.slug },
-		props: post,
+		props: {
+			post,
+			prevPost: index + 1 === total ? null : posts[index + 1],
+			nextPost: index === 0 ? null : posts[index - 1],
+		},
 	}));
 }
 type Props = CollectionEntry<"blog">;
 
-const post = Astro.props;
+const { post, prevPost, nextPost } = Astro.props;
 const { Content, remarkPluginFrontmatter } = await post.render();
 ---
 
@@ -40,6 +47,10 @@ const { Content, remarkPluginFrontmatter } = await post.render();
 			<Content />
 		</section>
 
+		<section>
+			<Pagination prevPost={prevPost} nextPost={nextPost} />
+		</section>
+
 		<section>
 			<Comments />
 		</section>