From c50b9868a195130b036c110ebed57995cd59499f Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <70828596+Isaiah-Hamilton@users.noreply.github.com>
Date: Sun, 8 May 2022 23:09:39 -0400
Subject: [PATCH] chore: use next/link in nav

---
 apps/www/components/Nav/Developers.tsx |  50 ++++----
 apps/www/components/Nav/Product.tsx    |  50 ++++----
 apps/www/components/Nav/index.tsx      | 151 +++++++++++++------------
 3 files changed, 125 insertions(+), 126 deletions(-)

diff --git a/apps/www/components/Nav/Developers.tsx b/apps/www/components/Nav/Developers.tsx
index 5aab3ce36f9..9840c0a060d 100644
--- a/apps/www/components/Nav/Developers.tsx
+++ b/apps/www/components/Nav/Developers.tsx
@@ -3,6 +3,7 @@ import DevelopersData from 'data/Developers.json'
 import AnnouncementsData from 'data/Announcements.json'
 import { useRouter } from 'next/router'
 import Image from 'next/image'
+import Link from 'next/link'
 
 type Props = {
   text: string
@@ -37,13 +38,11 @@ const Developers = () => {
       </div>
     )
     return url ? (
-      <a
-        key={text}
-        href={url}
-        className="dark:hover:bg-scale-500 col-span-6 rounded p-3 transition hover:bg-gray-50"
-      >
-        {content}
-      </a>
+      <Link href={url} key={text}>
+        <a className="dark:hover:bg-scale-500 col-span-6 rounded p-3 transition hover:bg-gray-50">
+          {content}
+        </a>
+      </Link>
     ) : (
       <div
         key={text}
@@ -65,25 +64,24 @@ const Developers = () => {
           <ul className="mt-6 space-y-3 pb-6">
             {AnnouncementsData.map((caseStudy: any, idx: number) => (
               <li className="flow-root" key={`flyout_case_${idx}`}>
-                <a
-                  href={caseStudy.url}
-                  className="dark:hover:bg-dark-700 flex items-center rounded-lg border p-3 transition duration-150 ease-in-out hover:bg-gray-100"
-                >
-                  <div className="relative hidden h-20 w-32 flex-shrink-0 overflow-auto rounded-md sm:block">
-                    <Image
-                      src={`${basePath}/${caseStudy.imgUrl}`}
-                      alt="caseStudyThumb"
-                      layout="fill"
-                      objectFit="cover"
-                    />
-                  </div>
-                  <div className="min-w-0 flex-1 sm:ml-4">
-                    <h4 className="text-scale-1200 text-normal mb-0 text-base">
-                      {caseStudy.title}
-                    </h4>
-                    <p className="p text-sm">{caseStudy.description}</p>
-                  </div>
-                </a>
+                <Link href={caseStudy.url}>
+                  <a className="dark:hover:bg-dark-700 flex items-center rounded-lg border p-3 transition duration-150 ease-in-out hover:bg-gray-100">
+                    <div className="relative hidden h-20 w-32 flex-shrink-0 overflow-auto rounded-md sm:block">
+                      <Image
+                        src={`${basePath}/${caseStudy.imgUrl}`}
+                        alt="caseStudyThumb"
+                        layout="fill"
+                        objectFit="cover"
+                      />
+                    </div>
+                    <div className="min-w-0 flex-1 sm:ml-4">
+                      <h4 className="text-scale-1200 text-normal mb-0 text-base">
+                        {caseStudy.title}
+                      </h4>
+                      <p className="p text-sm">{caseStudy.description}</p>
+                    </div>
+                  </a>
+                </Link>
               </li>
             ))}
           </ul>
diff --git a/apps/www/components/Nav/Product.tsx b/apps/www/components/Nav/Product.tsx
index aad606389d0..d398f72eb8c 100644
--- a/apps/www/components/Nav/Product.tsx
+++ b/apps/www/components/Nav/Product.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
 import ProductIcon from '../ProductIcon'
 import { Badge } from '@supabase/ui'
 import Image from 'next/image'
+import Link from 'next/link'
 
 const Product = () => {
   const { basePath } = useRouter()
@@ -30,13 +31,11 @@ const Product = () => {
     )
     return (
       url && (
-        <a
-          key={name}
-          href={url}
-          className="hover:bg-scale-300 dark:hover:bg-scale-500 col-span-6 rounded p-3 transition"
-        >
-          {content}
-        </a>
+        <Link href={url} key={name}>
+          <a className="hover:bg-scale-300 dark:hover:bg-scale-500 col-span-6 rounded p-3 transition">
+            {content}
+          </a>
+        </Link>
       )
     )
   })
@@ -56,25 +55,24 @@ const Product = () => {
               }
               return (
                 <li className="flow-root" key={`flyout_case_${idx}`}>
-                  <a
-                    href={caseStudy.url}
-                    className="dark:hover:bg-dark-700 flex items-center rounded-lg border p-3 transition duration-150 ease-in-out hover:bg-gray-100"
-                  >
-                    <div className="relative hidden h-20 w-32 flex-shrink-0 overflow-auto rounded-md sm:block">
-                      <Image
-                        src={`${basePath}/${caseStudy.imgUrl}`}
-                        alt="caseStudyThumb"
-                        layout="fill"
-                        objectFit="cover"
-                      />
-                    </div>
-                    <div className="min-w-0 flex-1 sm:ml-4">
-                      <h4 className="text-scale-1200 text-normal mb-0 text-base">
-                        {caseStudy.title}
-                      </h4>
-                      <p className="p text-sm">{caseStudy.description}</p>
-                    </div>
-                  </a>
+                  <Link href={caseStudy.url}>
+                    <a className="dark:hover:bg-dark-700 flex items-center rounded-lg border p-3 transition duration-150 ease-in-out hover:bg-gray-100">
+                      <div className="relative hidden h-20 w-32 flex-shrink-0 overflow-auto rounded-md sm:block">
+                        <Image
+                          src={`${basePath}/${caseStudy.imgUrl}`}
+                          alt="caseStudyThumb"
+                          layout="fill"
+                          objectFit="cover"
+                        />
+                      </div>
+                      <div className="min-w-0 flex-1 sm:ml-4">
+                        <h4 className="text-scale-1200 text-normal mb-0 text-base">
+                          {caseStudy.title}
+                        </h4>
+                        <p className="p text-sm">{caseStudy.description}</p>
+                      </div>
+                    </a>
+                  </Link>
                 </li>
               )
             })}
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index 92e457c9c52..8cf596bcd16 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -84,13 +84,11 @@ const Nav = () => {
       </div>
     )
     return url ? (
-      <a
-        key={`solution_${idx}`}
-        href={url}
-        className="dark:hover:bg-scale-600 -m-3 my-2 flex flex-col justify-between rounded-lg p-3 transition duration-150 ease-in-out hover:bg-gray-50"
-      >
-        {content}
-      </a>
+      <Link href={url} key={`solution_${idx}`}>
+        <a className="dark:hover:bg-scale-600 -m-3 my-2 flex flex-col justify-between rounded-lg p-3 transition duration-150 ease-in-out hover:bg-gray-50">
+          {content}
+        </a>
+      </Link>
     ) : (
       <div
         key={`solution_${idx}`}
@@ -202,7 +200,7 @@ const Nav = () => {
                         }
                         width={124}
                         height={24}
-                        alt="Logo"
+                        alt="Supabase Logo"
                       />
                     </a>
                   </Link>
@@ -218,26 +216,28 @@ const Nav = () => {
                     onClick={() => handleToggle(() => setOpenDevelopers(!openDevelopers))}
                     active={openDevelopers}
                   />
-                  <a
-                    href="/pricing"
-                    className={`
-                    text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
-                    border-b-2 border-transparent p-5 px-1
-                    text-sm font-medium
-                  `}
-                  >
-                    Pricing
-                  </a>
-                  <a
-                    href="/blog"
-                    className={`
-                    text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
-                    border-b-2 border-transparent p-5 px-1
-                    text-sm font-medium
-                  `}
-                  >
-                    Blog
-                  </a>
+                  <Link href="/pricing">
+                    <a
+                      className={`
+                        text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                        border-b-2 border-transparent p-5 px-1
+                        text-sm font-medium
+                      `}
+                    >
+                      Pricing
+                    </a>
+                  </Link>
+                  <Link href="/blog">
+                    <a
+                      className={`
+                        text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                        border-b-2 border-transparent p-5 px-1
+                        text-sm font-medium
+                      `}
+                    >
+                      Blog
+                    </a>
+                  </Link>
                 </div>
               </div>
               <div className="flex items-center gap-2">
@@ -270,14 +270,18 @@ const Nav = () => {
                   Star us on GitHub
                 </Button>
 
-                <a href="https://app.supabase.io/">
-                  <Button type="default" className="hidden lg:block">
-                    Sign in
-                  </Button>
-                </a>
-                <a href="https://app.supabase.io/">
-                  <Button className="hidden text-white lg:block">Start your project</Button>
-                </a>
+                <Link href="https://app.supabase.io/">
+                  <a>
+                    <Button type="default" className="hidden lg:block">
+                      Sign in
+                    </Button>
+                  </a>
+                </Link>
+                <Link href="https://app.supabase.io/">
+                  <a>
+                    <Button className="hidden text-white lg:block">Start your project</Button>
+                  </a>
+                </Link>
               </div>
             </div>
             {/* <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"></div> */}
@@ -324,46 +328,45 @@ const Nav = () => {
               {/* </div> */}
               <div className="mt-6 mb-12">
                 <div className="space-y-1 pt-2 pb-4">
-                  <a
-                    href="https://app.supabase.io/"
-                    className="text-scale-900 block pl-3 pr-4 text-base font-medium dark:text-white"
-                  >
-                    Sign in
-                  </a>
+                  <Link href="https://app.supabase.io/">
+                    <a className="text-scale-900 block pl-3 pr-4 text-base font-medium dark:text-white">
+                      Sign in
+                    </a>
+                  </Link>
                 </div>
                 <div className="space-y-1 pt-2 pb-4">
-                  <a
-                    href="/docs"
-                    className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
-                  >
-                    Developers
-                  </a>
-                  <a
-                    href="/company"
-                    className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
-                  >
-                    Company
-                  </a>
-                  <a
-                    href="/pricing"
-                    className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
-                  >
-                    Pricing
-                  </a>
-                  <a
-                    href="https://github.com/supabase/supabase"
-                    target="_blank"
-                    className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
-                  >
-                    GitHub
-                  </a>
-                  <a
-                    href="/blog"
-                    target="_blank"
-                    className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
-                  >
-                    Blog
-                  </a>
+                  <Link href="/docs">
+                    <a className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white">
+                      Developers
+                    </a>
+                  </Link>
+                  <Link href="/company">
+                    <a className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white">
+                      Company
+                    </a>
+                  </Link>
+                  <Link href="/pricing">
+                    <a className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white">
+                      Pricing
+                    </a>
+                  </Link>
+
+                  <Link href="https://github.com/supabase/supabase">
+                    <a
+                      target="_blank"
+                      className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
+                    >
+                      GitHub
+                    </a>
+                  </Link>
+                  <Link href="/blog">
+                    <a
+                      target="_blank"
+                      className="text-scale-900 dark:hover:bg-scale-600 block rounded-md py-2 pl-3 pr-4 text-base font-medium hover:border-gray-300 hover:bg-gray-50 dark:text-white"
+                    >
+                      Blog
+                    </a>
+                  </Link>
                 </div>
                 <div className="p-3">
                   <p className="text-scale-900 mb-6 text-sm">Products available:</p>