From 3744aa13d453fda37da9bfd74c804f6ec8a002b8 Mon Sep 17 00:00:00 2001
From: spencerwooo <spencer.woo@outlook.com>
Date: Thu, 26 Jan 2023 13:43:00 +0800
Subject: [PATCH] feat: use nextjs 13 links

---
 components/Breadcrumb.tsx       | 19 +++++++-----------
 components/FolderGridLayout.tsx |  4 +---
 components/FolderListLayout.tsx | 10 ++++++----
 components/Navbar.tsx           |  8 +++-----
 components/SearchModal.tsx      | 34 ++++++++++++++++-----------------
 components/SwitchLang.tsx       |  4 ++--
 6 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/components/Breadcrumb.tsx b/components/Breadcrumb.tsx
index 4e96a31..4a54e0f 100644
--- a/components/Breadcrumb.tsx
+++ b/components/Breadcrumb.tsx
@@ -8,11 +8,9 @@ const HomeCrumb = () => {
   const { t } = useTranslation()
 
   return (
-    <Link href="/">
-      <a className="flex items-center">
-        <FontAwesomeIcon className="h-3 w-3" icon={['far', 'flag']} />
-        <span className="ml-2 font-medium">{t('Home')}</span>
-      </a>
+    <Link href="/" className="flex items-center">
+      <FontAwesomeIcon className="h-3 w-3" icon={['far', 'flag']} />
+      <span className="ml-2 font-medium">{t('Home')}</span>
     </Link>
   )
 }
@@ -37,14 +35,11 @@ const Breadcrumb: React.FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
                     .map(p => encodeURIComponent(p))
                     .join('/')}`}
                   passHref
+                  className={`ml-1 transition-all duration-75 hover:opacity-70 md:ml-3 ${
+                    i == 0 && 'pointer-events-none opacity-80'
+                  }`}
                 >
-                  <a
-                    className={`ml-1 transition-all duration-75 hover:opacity-70 md:ml-3 ${
-                      i == 0 && 'pointer-events-none opacity-80'
-                    }`}
-                  >
-                    {p}
-                  </a>
+                  {p}
                 </Link>
               </li>
             ))}
diff --git a/components/FolderGridLayout.tsx b/components/FolderGridLayout.tsx
index 9e4cbac..620100e 100644
--- a/components/FolderGridLayout.tsx
+++ b/components/FolderGridLayout.tsx
@@ -176,9 +176,7 @@ const FolderGridLayout = ({
             </div>
 
             <Link href={getItemPath(c.name)} passHref>
-              <a>
-                <GridItem c={c} path={getItemPath(c.name)} />
-              </a>
+              <GridItem c={c} path={getItemPath(c.name)} />
             </Link>
           </div>
         ))}
diff --git a/components/FolderListLayout.tsx b/components/FolderListLayout.tsx
index b0a1b94..840434e 100644
--- a/components/FolderListLayout.tsx
+++ b/components/FolderListLayout.tsx
@@ -96,10 +96,12 @@ const FolderListLayout = ({
           className="grid grid-cols-12 transition-all duration-100 hover:bg-gray-100 dark:hover:bg-gray-850"
           key={c.id}
         >
-          <Link href={`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`} passHref>
-            <a className="col-span-12 md:col-span-10">
-              <FileListItem fileContent={c} />
-            </a>
+          <Link
+            href={`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`}
+            passHref
+            className="col-span-12 md:col-span-10"
+          >
+            <FileListItem fileContent={c} />
           </Link>
 
           {c.folder ? (
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 47a796f..7b87999 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -64,11 +64,9 @@ const Navbar = () => {
       <SearchModal searchOpen={searchOpen} setSearchOpen={setSearchOpen} />
 
       <div className="mx-auto flex w-full items-center justify-between space-x-4 px-4 py-1">
-        <Link href="/" passHref>
-          <a className="flex items-center space-x-2 py-2 hover:opacity-80 dark:text-white md:p-2">
-            <Image src={siteConfig.icon} alt="icon" width="25" height="25" priority />
-            <span className="hidden font-bold sm:block">{siteConfig.title}</span>
-          </a>
+        <Link href="/" passHref className="flex items-center space-x-2 py-2 hover:opacity-80 dark:text-white md:p-2">
+          <Image src={siteConfig.icon} alt="icon" width="25" height="25" priority />
+          <span className="hidden font-bold sm:block">{siteConfig.title}</span>
         </Link>
 
         <div className="flex flex-1 items-center space-x-4 text-gray-700 md:flex-initial">
diff --git a/components/SearchModal.tsx b/components/SearchModal.tsx
index f02c9d4..2c014a1 100644
--- a/components/SearchModal.tsx
+++ b/components/SearchModal.tsx
@@ -90,24 +90,24 @@ function SearchResultItemTemplate({
   disabled: boolean
 }) {
   return (
-    <Link href={driveItemPath} passHref>
-      <a
-        className={`flex items-center space-x-4 border-b border-gray-400/30 px-4 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-850 ${
-          disabled ? 'pointer-events-none cursor-not-allowed' : 'cursor-pointer'
-        }`}
-      >
-        <FontAwesomeIcon icon={driveItem.file ? getFileIcon(driveItem.name) : ['far', 'folder']} />
-        <div>
-          <div className="text-sm font-medium leading-8">{driveItem.name}</div>
-          <div
-            className={`overflow-hidden truncate font-mono text-xs opacity-60 ${
-              itemDescription === 'Loading ...' && 'animate-pulse'
-            }`}
-          >
-            {itemDescription}
-          </div>
+    <Link
+      href={driveItemPath}
+      passHref
+      className={`flex items-center space-x-4 border-b border-gray-400/30 px-4 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-850 ${
+        disabled ? 'pointer-events-none cursor-not-allowed' : 'cursor-pointer'
+      }`}
+    >
+      <FontAwesomeIcon icon={driveItem.file ? getFileIcon(driveItem.name) : ['far', 'folder']} />
+      <div>
+        <div className="text-sm font-medium leading-8">{driveItem.name}</div>
+        <div
+          className={`overflow-hidden truncate font-mono text-xs opacity-60 ${
+            itemDescription === 'Loading ...' && 'animate-pulse'
+          }`}
+        >
+          {itemDescription}
         </div>
-      </a>
+      </div>
     </Link>
   )
 }
diff --git a/components/SwitchLang.tsx b/components/SwitchLang.tsx
index d31b5f2..67530ef 100644
--- a/components/SwitchLang.tsx
+++ b/components/SwitchLang.tsx
@@ -9,8 +9,8 @@ import { useCookies, withCookies } from 'react-cookie'
 // https://headlessui.dev/react/menu#integrating-with-next-js
 const CustomLink = ({ href, children, as, locale, ...props }): JSX.Element => {
   return (
-    <Link href={href} as={as} locale={locale}>
-      <a {...props}>{children}</a>
+    <Link href={href} as={as} locale={locale} {...props}>
+      {children}
     </Link>
   )
 }