From 729d3ae6115ebbb403bca3c21eaedc18adf2c5c1 Mon Sep 17 00:00:00 2001
From: HangerThem <f.borisjuk@hangerthem.com>
Date: Tue, 4 Aug 2026 11:45:46 +0200
Subject: [PATCH] Better post navigation

---
 app/posts/[slug]/page.tsx | 29 +++++++++++++++++++++--------
 lib/posts.tsx             |  8 +++-----
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 80a2f0c..9611625 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -4,7 +4,7 @@ import { ShareLinks } from '@/components/post/ShareLinks'
 import { TableOfContents } from '@/components/post/TableOfContents'
 import { getAllPostSlugs, getNextAndPreviousPosts, getPostBySlug } from '@/lib/posts'
 import { slugify } from '@/utils/slug'
-import { Pencil, SendHorizonal } from 'lucide-react'
+import { ArrowLeft, ArrowRight, Pencil, SendHorizonal } from 'lucide-react'
 import type { Metadata } from 'next'
 import Link from 'next/link'
 
@@ -126,26 +126,39 @@ export default async function Post({ params }: { params: Promise<{ slug: string
           />
         </div>
 
-        <div className="mt-8 flex justify-between">
+        <div className="mt-12 grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 border-t border-border pt-8">
           {previous ? (
             <Link
               href={`/posts/${previous.slug}`}
-              className="text-accent hover:underline font-sm mb-2 block"
+              className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-muted/50 active:bg-muted/70"
             >
-              &larr; {previous.title}
+              <span className="flex items-center gap-1 text-xs text-muted-foreground uppercase tracking-wide">
+                <ArrowLeft className="w-3 h-3 shrink-0 transition-transform group-hover:-translate-x-1" />
+                Previous
+              </span>
+              <span className="text-accent font-medium group-hover:underline line-clamp-2">
+                {previous.title}
+              </span>
             </Link>
           ) : (
-            <div />
+            <div className="hidden sm:block" />
           )}
+
           {next ? (
             <Link
               href={`/posts/${next.slug}`}
-              className="text-accent hover:underline font-sm mb-2 block"
+              className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-muted/50 active:bg-muted/70 sm:text-right"
             >
-              {next.title} &rarr;
+              <span className="flex items-center gap-1 text-xs text-muted-foreground uppercase tracking-wide sm:justify-end">
+                Next
+                <ArrowRight className="w-3 h-3 shrink-0 transition-transform group-hover:translate-x-1" />
+              </span>
+              <span className="text-accent font-medium group-hover:underline line-clamp-2">
+                {next.title}
+              </span>
             </Link>
           ) : (
-            <div />
+            <div className="hidden sm:block" />
           )}
         </div>
       </article>
diff --git a/lib/posts.tsx b/lib/posts.tsx
index 8bfa22a..04746cb 100644
--- a/lib/posts.tsx
+++ b/lib/posts.tsx
@@ -56,8 +56,8 @@ export function getNextAndPreviousPosts(slug: string): {
 } {
   const posts = getAllPostsMeta()
   const index = posts.findIndex((post) => post.slug === slug)
-  const next = index < posts.length - 1 ? posts[index + 1] : null
-  const previous = index > 0 ? posts[index - 1] : null
+  const previous = index < posts.length - 1 ? posts[index + 1] : null
+  const next = index > 0 ? posts[index - 1] : null
   return { next, previous }
 }
 
@@ -99,9 +99,7 @@ export async function getPostBySlug(slug: string, postDirectory: string = postsD
       img: ({ src, alt }: { src: string; alt: string }) => <ImageWrapper src={src} alt={alt} />,
       a: ({ href, children }: { href: string; children: ReactNode }) =>
         href?.startsWith('http') ? (
-          <ExternalLink href={href}>
-            {children}
-          </ExternalLink>
+          <ExternalLink href={href}>{children}</ExternalLink>
         ) : (
           <Link href={href}>{children}</Link>
         ),