feat(docs): add prev. and next navigation links

apps/docs/src/app/(main)/[...slug]/docs-navigation.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { Link } from '@tszhong0411/ui'
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
+import { usePathname } from 'next/navigation'
+
+import { SIDEBAR_LINKS } from '@/config/links'
+
+const DocsNavigation = () => {
+  const pathname = usePathname()
+  const links = SIDEBAR_LINKS.flatMap((s) => s.links)
+
+  const currentIndex = links.findIndex((link) => link.href === pathname)
+  const prevLink = links[currentIndex - 1] ?? null
+  const nextLink = links[currentIndex + 1] ?? null
+
+  return (
+    <nav aria-label='Documentation navigation' className='flex justify-between'>
+      {prevLink ? (
+        <Link href={prevLink.href} className='group flex items-center gap-1.5' variant='muted'>
+          <ChevronLeftIcon className='size-4 transition-transform group-hover:-translate-x-0.5' />
+          <span>{prevLink.text}</span>
+        </Link>
+      ) : (
+        <div />
+      )}
+      {nextLink ? (
+        <Link href={nextLink.href} className='group flex items-center gap-1.5' variant='muted'>
+          <span>{nextLink.text}</span>
+          <ChevronRightIcon className='size-4 transition-transform group-hover:translate-x-0.5' />
+        </Link>
+      ) : (
+        <div />
+      )}
+    </nav>
+  )
+}
+
+export default DocsNavigation

apps/docs/src/app/(main)/[...slug]/edit-on-github.tsx

@@ -11,7 +11,7 @@ const EditOnGitHub = (props: EditOnGitHubProps) => {
   const url = `https://github.com/tszhong0411/honghong.me/blob/main/apps/docs/src/app/${path}.mdx`
 
   return (
-    <Link href={url} className='flex items-center gap-2 text-sm font-medium'>
+    <Link href={url} className='inline-flex items-center gap-2 text-sm font-medium' variant='muted'>
       <EditIcon className='size-4' />
       Edit this page on GitHub
     </Link>

apps/docs/src/app/(main)/[...slug]/page.tsx

@@ -5,6 +5,7 @@ import { notFound } from 'next/navigation'
 
 import Mdx from '@/components/mdx'
 
+import DocsNavigation from './docs-navigation'
 import EditOnGitHub from './edit-on-github'
 import LinkBadges from './link-badges'
 
@@ -83,10 +84,9 @@ const Page = async (props: PageProps) => {
         <p className='text-muted-foreground'>{description}</p>
         {hasLinks ? <LinkBadges {...link} /> : null}
       </div>
-      <Mdx className='mt-8' code={code} />
-      <div className='flex items-center justify-between'>
-        <EditOnGitHub path={slug!.join('/')} />
-      </div>
+      <Mdx className='my-12' code={code} />
+      <EditOnGitHub path={slug!.join('/')} />
+      <DocsNavigation />
     </div>
   )
 }