From 5c0983ef6c0cec04df0ee8ccdff02f9ea460167d Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Thu, 10 Feb 2022 11:46:35 +0000
Subject: [PATCH] added Link component to see if it fixes the 404 link bug
 (#1784)

---
 pages/404.tsx | 64 +++++++++++++++++++++++++++------------------------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/pages/404.tsx b/pages/404.tsx
index 283fa672..39f06fb3 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -32,6 +32,8 @@ export default function Custom404() {
 
   const isSubpage = router.asPath.includes("/", 2);
   const isSignup = router.asPath.includes("/signup");
+  const isCalcom = process.env.NEXT_PUBLIC_BASE_URL === "https://app.cal.com";
+  const signupLink = "https://cal.com/signup?username=" + username.replace("/", "");
 
   return (
     <>
@@ -175,13 +177,13 @@ export default function Custom404() {
                   <span className="mt-2 inline-block text-lg ">
                     {t("check_spelling_mistakes_or_go_back")}
                   </span>
-                ) : process.env.NEXT_PUBLIC_BASE_URL === "https://app.cal.com" ? (
-                  <a
-                    href={"https://cal.com/signup?username=" + username.replace("/", "")}
-                    className="mt-2 inline-block text-lg ">
-                    {t("the_username")} <strong className="text-blue-500">cal.com{username}</strong>{" "}
-                    {t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
-                  </a>
+                ) : isCalcom ? (
+                  <Link href={signupLink}>
+                    <a className="mt-2 inline-block text-lg">
+                      {t("the_username")} <strong className="text-blue-500">cal.com{username}</strong>{" "}
+                      {t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
+                    </a>
+                  </Link>
                 ) : (
                   <>
                     {t("the_username")}{" "}
@@ -197,32 +199,34 @@ export default function Custom404() {
                 <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
                   {t("popular_pages")}
                 </h2>
-                {!isSubpage && process.env.NEXT_PUBLIC_BASE_URL === "https://app.cal.com" && (
+                {!isSubpage && isCalcom && (
                   <ul role="list" className="mt-4">
                     <li className="border-2 border-green-500 px-4 py-2">
-                      <a
-                        href={"https://cal.com/signup?username=" + username.replace("/", "")}
-                        className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                        <div className="flex-shrink-0">
-                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                            <CheckIcon className="h-6 w-6 text-green-500" aria-hidden="true" />
-                          </span>
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <h3 className="text-base font-medium text-gray-900">
-                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
-                              <span className="focus:outline-none">
-                                <span className="absolute inset-0" aria-hidden="true" />
-                                {t("register")} <strong className="text-green-500">{username}</strong>
-                              </span>
+                      <Link href={signupLink}>
+                        <a className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
+                          <div className="flex-shrink-0">
+                            <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
+                              <CheckIcon className="h-6 w-6 text-green-500" aria-hidden="true" />
                             </span>
-                          </h3>
-                          <p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
-                        </div>
-                        <div className="flex-shrink-0 self-center">
-                          <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                        </div>
-                      </a>
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <h3 className="text-base font-medium text-gray-900">
+                              <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                                <span className="focus:outline-none">
+                                  <span className="absolute inset-0" aria-hidden="true" />
+                                  {t("register")} <strong className="text-green-500">{username}</strong>
+                                </span>
+                              </span>
+                            </h3>
+                            <p className="text-base text-gray-500">
+                              {t("claim_username_and_schedule_events")}
+                            </p>
+                          </div>
+                          <div className="flex-shrink-0 self-center">
+                            <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                          </div>
+                        </a>
+                      </Link>
                     </li>
                   </ul>
                 )}