From fc3154189aa6ab390fdaf65cf4aece4489561330 Mon Sep 17 00:00:00 2001
From: jo-elimu <1451036+jo-elimu@users.noreply.github.com>
Date: Thu, 19 Oct 2023 19:03:58 +0700
Subject: [PATCH] fix link error

---
 components/CustomLink.js |  2 +-
 components/Header.js     |  2 +-
 pages/index.js           | 27 +++++++++++++--------------
 pages/posts/[slug].js    | 36 ++++++++++++++++--------------------
 4 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/components/CustomLink.js b/components/CustomLink.js
index f3fa884..ceba536 100644
--- a/components/CustomLink.js
+++ b/components/CustomLink.js
@@ -3,7 +3,7 @@ import Link from 'next/link';
 export default function CustomLink({ as, href, ...otherProps }) {
   return (
     <>
-      <Link as={as} href={href}>
+      <Link legacyBehavior as={as} href={href}>
         <a {...otherProps} />
       </Link>
     </>
diff --git a/components/Header.js b/components/Header.js
index 2a51426..2076150 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -5,7 +5,7 @@ export default function Header({ name }) {
     <header className="pt-20 pb-12">
       <div className="w-12 h-12 rounded-full block mx-auto mb-4 bg-gradient-conic from-gradient-3 to-gradient-4" />
       <p className="text-2xl dark:text-white text-center">
-        <Link href="/">
+        <Link legacyBehavior href="/">
           <a>{name}</a>
         </Link>
       </p>
diff --git a/pages/index.js b/pages/index.js
index 3bf4e44..5a9a613 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -26,21 +26,20 @@ export default function Index({ posts, globalData }) {
               <Link
                 as={`/posts/${post.filePath.replace(/\.mdx?$/, '')}`}
                 href={`/posts/[slug]`}
+                className="py-6 lg:py-10 px-6 lg:px-16 block focus:outline-none focus:ring-4"
               >
-                <a className="py-6 lg:py-10 px-6 lg:px-16 block focus:outline-none focus:ring-4">
-                  {post.data.date && (
-                    <p className="uppercase mb-3 font-bold opacity-60">
-                      {post.data.date}
-                    </p>
-                  )}
-                  <h2 className="text-2xl md:text-3xl">{post.data.title}</h2>
-                  {post.data.description && (
-                    <p className="mt-3 text-lg opacity-60">
-                      {post.data.description}
-                    </p>
-                  )}
-                  <ArrowIcon className="mt-4" />
-                </a>
+                {post.data.date && (
+                  <p className="uppercase mb-3 font-bold opacity-60">
+                    {post.data.date}
+                  </p>
+                )}
+                <h2 className="text-2xl md:text-3xl">{post.data.title}</h2>
+                {post.data.description && (
+                  <p className="mt-3 text-lg opacity-60">
+                    {post.data.description}
+                  </p>
+                )}
+                <ArrowIcon className="mt-4" />
               </Link>
             </li>
           ))}
diff --git a/pages/posts/[slug].js b/pages/posts/[slug].js
index 27c828e..697a856 100644
--- a/pages/posts/[slug].js
+++ b/pages/posts/[slug].js
@@ -58,29 +58,25 @@ export default function PostPage({
         </main>
         <div className="grid md:grid-cols-2 lg:-mx-24 mt-12">
           {prevPost && (
-            <Link href={`/posts/${prevPost.slug}`}>
-              <a className="py-8 px-10 text-center md:text-right first:rounded-t-lg md:first:rounded-tr-none md:first:rounded-l-lg last:rounded-r-lg first last:rounded-b-lg backdrop-blur-lg bg-white dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-50 transition border border-gray-800 dark:border-white border-opacity-10 dark:border-opacity-10 last:border-t md:border-r-0 md:last:border-r md:last:rounded-r-none flex flex-col">
-                <p className="uppercase text-gray-500 mb-4 dark:text-white dark:opacity-60">
-                  Previous
-                </p>
-                <h4 className="text-2xl text-gray-700 mb-6 dark:text-white">
-                  {prevPost.title}
-                </h4>
-                <ArrowIcon className="transform rotate-180 mx-auto md:mr-0 mt-auto" />
-              </a>
+            <Link href={`/posts/${prevPost.slug}`} className="py-8 px-10 text-center md:text-right first:rounded-t-lg md:first:rounded-tr-none md:first:rounded-l-lg last:rounded-r-lg first last:rounded-b-lg backdrop-blur-lg bg-white dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-50 transition border border-gray-800 dark:border-white border-opacity-10 dark:border-opacity-10 last:border-t md:border-r-0 md:last:border-r md:last:rounded-r-none flex flex-col">
+              <p className="uppercase text-gray-500 mb-4 dark:text-white dark:opacity-60">
+                Previous
+              </p>
+              <h4 className="text-2xl text-gray-700 mb-6 dark:text-white">
+                {prevPost.title}
+              </h4>
+              <ArrowIcon className="transform rotate-180 mx-auto md:mr-0 mt-auto" />
             </Link>
           )}
           {nextPost && (
-            <Link href={`/posts/${nextPost.slug}`}>
-              <a className="py-8 px-10 text-center md:text-left md:first:rounded-t-lg last:rounded-b-lg first:rounded-l-lg md:last:rounded-bl-none md:last:rounded-r-lg backdrop-blur-lg bg-white dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-50 transition border border-gray-800 dark:border-white border-opacity-10 dark:border-opacity-10 border-t-0 first:border-t first:rounded-t-lg md:border-t border-b-0 last:border-b flex flex-col">
-                <p className="uppercase text-gray-500 mb-4 dark:text-white dark:opacity-60">
-                  Next
-                </p>
-                <h4 className="text-2xl text-gray-700 mb-6 dark:text-white">
-                  {nextPost.title}
-                </h4>
-                <ArrowIcon className="mt-auto mx-auto md:ml-0" />
-              </a>
+            <Link href={`/posts/${nextPost.slug}`} className="py-8 px-10 text-center md:text-left md:first:rounded-t-lg last:rounded-b-lg first:rounded-l-lg md:last:rounded-bl-none md:last:rounded-r-lg backdrop-blur-lg bg-white dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-50 transition border border-gray-800 dark:border-white border-opacity-10 dark:border-opacity-10 border-t-0 first:border-t first:rounded-t-lg md:border-t border-b-0 last:border-b flex flex-col">
+              <p className="uppercase text-gray-500 mb-4 dark:text-white dark:opacity-60">
+                Next
+              </p>
+              <h4 className="text-2xl text-gray-700 mb-6 dark:text-white">
+                {nextPost.title}
+              </h4>
+              <ArrowIcon className="mt-auto mx-auto md:ml-0" />
             </Link>
           )}
         </div>