From afb617a64d01bd6d1d4d2002ecd4ca334875a408 Mon Sep 17 00:00:00 2001
From: NovaFox161 <nova@maday.dev>
Date: Mon, 20 Jan 2025 22:19:12 -0600
Subject: [PATCH] Get pages loading now due to link changes in upgrade

---
 components/footer.tsx | 151 ++++++++++++++++++---------------
 components/navbar.tsx | 192 ++++++++++++++++++++++--------------------
 pages/index.tsx       |  60 +++++++------
 3 files changed, 221 insertions(+), 182 deletions(-)

diff --git a/components/footer.tsx b/components/footer.tsx
index 2be2d3c..e74dd55 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -57,94 +57,107 @@ const navigation = {
 
 
 function Branding() {
-    return <div className="space-y-8 xl:col-span-1">
-        <img
-            className="h-10"
-            src="/logos/light/transparent/logo-type.png"
-            alt="DisCal Bot"
-        />
-        <p className="text-white text-base">
-            The ultimate Discord calendar bot.
-        </p>
-        <div className="flex space-x-6">
-            {navigation.social.map((item) => (
-                <Link key={item.name} href={item.href}>
-                    <a className="text-discord-greyple hover:text-discal-blue">
+    return (
+        <div className="space-y-8 xl:col-span-1">
+            <img
+                className="h-10"
+                src="/logos/light/transparent/logo-type.png"
+                alt="DisCal Bot"
+            />
+            <p className="text-white text-base">
+                The ultimate Discord calendar bot.
+            </p>
+            <div className="flex space-x-6">
+                {navigation.social.map((item) => (
+                    <Link
+                        key={item.name}
+                        href={item.href}
+                        className="text-discord-greyple hover:text-discal-blue">
+
                         <span className="sr-only">{item.name}</span>
                         <item.icon className={"h-6 w-6"} aria-hidden="true"/>
-                    </a>
-                </Link>
-            ))}
+
+                    </Link>
+                ))}
+            </div>
         </div>
-    </div>
+    );
 }
 
 function DiscalSection() {
-    return <div>
-        <h3 className="text-sm font-semibold text-white tracking-wider uppercase">DisCal</h3>
-        <ul role="list" className="mt-4 space-y-4">
-            {navigation.discal.map((item) => (
-                <li key={item.name}>
-                    <Link href={item.href}>
-                        <a className="text-base text-discord-greyple hover:text-discal-blue">
+    return (
+        <div>
+            <h3 className="text-sm font-semibold text-white tracking-wider uppercase">DisCal</h3>
+            <ul role="list" className="mt-4 space-y-4">
+                {navigation.discal.map((item) => (
+                    <li key={item.name}>
+                        <Link
+                            href={item.href}
+                            className="text-base text-discord-greyple hover:text-discal-blue">
                             {item.name}
-                        </a>
-                    </Link>
-                </li>
-            ))}
-        </ul>
-    </div>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
 }
 
 function DevelopersSection() {
-    return <div className="mt-12 md:mt-0">
-        <h3 className="text-sm font-semibold text-white tracking-wider uppercase">Developers</h3>
-        <ul role="list" className="mt-4 space-y-4">
-            {navigation.developers.map((item) => (
-                <li key={item.name}>
-                    <Link href={item.href}>
-                        <a className="text-base text-discord-greyple hover:text-discal-blue">
+    return (
+        <div className="mt-12 md:mt-0">
+            <h3 className="text-sm font-semibold text-white tracking-wider uppercase">Developers</h3>
+            <ul role="list" className="mt-4 space-y-4">
+                {navigation.developers.map((item) => (
+                    <li key={item.name}>
+                        <Link
+                            href={item.href}
+                            className="text-base text-discord-greyple hover:text-discal-blue">
                             {item.name}
-                        </a>
-                    </Link>
-                </li>
-            ))}
-        </ul>
-    </div>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
 }
 
 function CompanySection() {
-    return <div>
-        <h3 className="text-sm font-semibold text-white tracking-wider uppercase">Company</h3>
-        <ul role="list" className="mt-4 space-y-4">
-            {navigation.company.map((item) => (
-                <li key={item.name}>
-                    <Link href={item.href}>
-                        <a className="text-base text-discord-greyple hover:text-discal-blue">
+    return (
+        <div>
+            <h3 className="text-sm font-semibold text-white tracking-wider uppercase">Company</h3>
+            <ul role="list" className="mt-4 space-y-4">
+                {navigation.company.map((item) => (
+                    <li key={item.name}>
+                        <Link
+                            href={item.href}
+                            className="text-base text-discord-greyple hover:text-discal-blue">
                             {item.name}
-                        </a>
-                    </Link>
-                </li>
-            ))}
-        </ul>
-    </div>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
 }
 
 function LegalSection() {
-    return <div className="mt-12 md:mt-0">
-        <h3 className="text-sm font-semibold text-white tracking-wider uppercase">Legal</h3>
-        <ul role="list" className="mt-4 space-y-4">
-            {navigation.legal.map((item) => (
-                <li key={item.name}>
-                    <Link href={item.href}>
-                        <a className="text-base text-discord-greyple hover:text-discal-blue">
+    return (
+        <div className="mt-12 md:mt-0">
+            <h3 className="text-sm font-semibold text-white tracking-wider uppercase">Legal</h3>
+            <ul role="list" className="mt-4 space-y-4">
+                {navigation.legal.map((item) => (
+                    <li key={item.name}>
+                        <Link
+                            href={item.href}
+                            className="text-base text-discord-greyple hover:text-discal-blue">
                             {item.name}
-                        </a>
-                    </Link>
-                </li>
-            ))}
-        </ul>
-    </div>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
 }
 
 function LinksBlock() {
diff --git a/components/navbar.tsx b/components/navbar.tsx
index b86e187..12901e0 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -40,42 +40,45 @@ export default function Navbar() {
     }
 
     function BrandingImage() {
-        return <div className="flex-shrink-0 flex items-center">
-            <Link href={"/"}>
-                <img
-                    className="block lg:hidden h-8 w-auto"
-                    src="/logos/dark/transparent/logo.png"
-                    alt="DisCal"
-                />
-                <img
-                    className="hidden lg:block h-8 w-auto"
-                    src="/logos/dark/transparent/logo-type.png"
-                    alt="DisCal"
-                />
-                <span className="sr-only">Homepage</span>
-            </Link>
-        </div>
+        return (
+            <div className="flex-shrink-0 flex items-center">
+                <Link href={"/"}>
+                    <img
+                        className="block lg:hidden h-8 w-auto"
+                        src="/logos/dark/transparent/logo.png"
+                        alt="DisCal"
+                    />
+                    <img
+                        className="hidden lg:block h-8 w-auto"
+                        src="/logos/dark/transparent/logo-type.png"
+                        alt="DisCal"
+                    />
+                    <span className="sr-only">Homepage</span>
+                </Link>
+            </div>
+        );
     }
 
     function DesktopNavigationItems() {
-        return <div className="hidden sm:block sm:ml-6">
-            <div className="flex space-x-4">
-                {navigation.map((item) => (
-                    <Link href={item.href} key={item.name}>
-                        <a
+        return (
+            <div className="hidden sm:block sm:ml-6">
+                <div className="flex space-x-4">
+                    {navigation.map((item) => (
+                        <Link
+                            href={item.href}
+                            key={item.name}
                             className={classNames(
                                 currentPage(router, item.href) ? 'bg-discal-dark-blue text-white' :
                                     'text-white hover:bg-discal-dark-grey hover:text-white',
                                 'px-3 py-2 rounded-md text-sm font-medium'
                             )}
-                            aria-current={currentPage(router, item.href) ? 'page' : undefined}
-                        >
+                            aria-current={currentPage(router, item.href) ? 'page' : undefined}>
                             {item.name}
-                        </a>
-                    </Link>
-                ))}
+                        </Link>
+                    ))}
+                </div>
             </div>
-        </div>
+        );
     }
 
     function SupportButton() {
@@ -89,75 +92,86 @@ export default function Navbar() {
     }
 
     function LoginButton(): JSX.Element {
-        return <Link href="/login">
-            <a className="bg-discal-dark-blue text-white px-3 py-2 rounded-md text-sm font-medium"
-               onClick={() => saveToLocalStorage("previous_page", window.location.href)}>
-                Login
-            </a>
-        </Link>
+        return (
+            <Link
+                href="/login"
+                className="bg-discal-dark-blue text-white px-3 py-2 rounded-md text-sm font-medium"
+                onClick={() => saveToLocalStorage("previous_page", window.location.href)}>
+                
+                    Login
+                
+            </Link>
+        );
     }
 
     function ProfileDropdown(props: {user: User}): JSX.Element {
-        return <Menu as="div" className="ml-3 relative">
-            <div>
-                <Menu.Button
-                    className="bg-discal-dark-blue flex text-sm rounded-full focus:outline-none focus:ring-2
-                                        focus:ring-offset-2 focus:ring-offset-discal-dark-grey focus:ring-white">
-                    <span className="sr-only">Open user menu</span>
-                    <img className="h-8 w-8 rounded-full"
-                         src={props.user.avatar}
-                         alt="Profile Photo"
-                    />
-                </Menu.Button>
-            </div>
-            <Transition
-                as={Fragment}
-                enter="transition ease-out duration-100"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-            >
-                <Menu.Items className="z-[999] origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1
-                                        bg-discord-not-quite-black ring-1 ring-black ring-opacity-5 focus:outline-none">
-                    <Menu.Item>
-                        <p className="block px-4 py-2 text-sm text-discal-light-grey">
-                            {props.user.username}#{props.user.discriminator}
-                        </p>
-                    </Menu.Item>
-                    <Menu.Item>
-                        <Link href='/logout'>
-                            <a role={"button"} className="block px-4 py-2 text-sm text-discal-red">
-                                Sign out
-                            </a>
-                        </Link>
-                    </Menu.Item>
-                </Menu.Items>
-            </Transition>
-        </Menu>
+        return (
+            <Menu as="div" className="ml-3 relative">
+                <div>
+                    <Menu.Button
+                        className="bg-discal-dark-blue flex text-sm rounded-full focus:outline-none focus:ring-2
+                                            focus:ring-offset-2 focus:ring-offset-discal-dark-grey focus:ring-white">
+                        <span className="sr-only">Open user menu</span>
+                        <img className="h-8 w-8 rounded-full"
+                             src={props.user.avatar}
+                             alt="Profile Photo"
+                        />
+                    </Menu.Button>
+                </div>
+                <Transition
+                    as={Fragment}
+                    enter="transition ease-out duration-100"
+                    enterFrom="opacity-0 scale-95"
+                    enterTo="opacity-100 scale-100"
+                    leave="transition ease-in duration-75"
+                    leaveFrom="opacity-100 scale-100"
+                    leaveTo="opacity-0 scale-95"
+                >
+                    <Menu.Items className="z-[999] origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1
+                                            bg-discord-not-quite-black ring-1 ring-black ring-opacity-5 focus:outline-none">
+                        <Menu.Item>
+                            <p className="block px-4 py-2 text-sm text-discal-light-grey">
+                                {props.user.username}#{props.user.discriminator}
+                            </p>
+                        </Menu.Item>
+                        <Menu.Item>
+                            <Link
+                                href='/logout'
+                                role={"button"}
+                                className="block px-4 py-2 text-sm text-discal-red">
+                                
+                                    Sign out
+                                
+                            </Link>
+                        </Menu.Item>
+                    </Menu.Items>
+                </Transition>
+            </Menu>
+        );
     }
 
     function MobileDropdownNav(): JSX.Element {
-        return <Disclosure.Panel className="sm:hidden" onClick={() => setOpen(!open)}>
-            <div className="px-2 pt-2 pb-3 space-y-1">
-                {navigation.map((item) => (
-                    <Link href={item.href} key={item.name} passHref>
-                        <Disclosure.Button
-                            as="a"
-                            className={classNames(
-                                currentPage(router, item.href) ? 'bg-discal-dark-blue text-white' :
-                                    'text-white hover:bg-discal-dark-grey hover:text-white',
-                                'block px-3 py-2 rounded-md text-base font-medium'
-                            )}
-                            aria-current={currentPage(router, item.href) ? 'page' : undefined}
-                        >
-                            {item.name}
-                        </Disclosure.Button>
-                    </Link>
-                ))}
-            </div>
-        </Disclosure.Panel>
+        return (
+            <Disclosure.Panel className="sm:hidden" onClick={() => setOpen(!open)}>
+                <div className="px-2 pt-2 pb-3 space-y-1">
+                    {navigation.map((item) => (
+                        <Link href={item.href} key={item.name} passHref legacyBehavior>
+                            <Disclosure.Button
+                                as="a"
+                                className={classNames(
+                                    currentPage(router, item.href) ? 'bg-discal-dark-blue text-white' :
+                                        'text-white hover:bg-discal-dark-grey hover:text-white',
+                                    'block px-3 py-2 rounded-md text-base font-medium'
+                                )}
+                                aria-current={currentPage(router, item.href) ? 'page' : undefined}
+                            >
+                                {item.name}
+                            </Disclosure.Button>
+                        </Link>
+                    ))}
+                </div>
+            </Disclosure.Panel>
+        );
     }
 
     return <Disclosure as="nav" className="bg-discal-blue">
diff --git a/pages/index.tsx b/pages/index.tsx
index 2cd07af..f3513ae 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -30,27 +30,37 @@ function Hero(): JSX.Element {
 
     function ButtonContainer(): JSX.Element {
         function GetStartedButton(): JSX.Element {
-            return <div className="rounded-md shadow">
-                <Link href='/invite' passHref>
-                    <a className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base
-                    font-medium rounded-md text-white bg-discal-blue hover:bg-discal-green
-                    hover:text-discord-not-quite-black md:py-4 md:text-lg md:px-10">
-                        Get Started
-                    </a>
-                </Link>
-            </div>
+            return (
+                <div className="rounded-md shadow">
+                    <Link
+                        href='/invite'
+                        passHref
+                        className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base
+                        font-medium rounded-md text-white bg-discal-blue hover:bg-discal-green
+                        hover:text-discord-not-quite-black md:py-4 md:text-lg md:px-10">
+                        
+                            Get Started
+                        
+                    </Link>
+                </div>
+            );
         }
 
         function PremiumButton(): JSX.Element {
-            return <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-                <Link href='/premium' passHref>
-                    <a className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base
-                    font-medium rounded-md text-discal-blue bg-white hover:bg-discal-green
-                    hover:text-discord-not-quite-black md:py-4 md:text-lg md:px-10">
-                        Premium
-                    </a>
-                </Link>
-            </div>
+            return (
+                <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
+                    <Link
+                        href='/premium'
+                        passHref
+                        className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base
+                        font-medium rounded-md text-discal-blue bg-white hover:bg-discal-green
+                        hover:text-discord-not-quite-black md:py-4 md:text-lg md:px-10">
+                        
+                            Premium
+                        
+                    </Link>
+                </div>
+            );
         }
 
         return <div className="mt-10 sm:flex sm:justify-center lg:justify-start">
@@ -197,12 +207,14 @@ function CTA(): JSX.Element {
     }
 
     function InviteButton(): JSX.Element {
-        return <Link href='/invite' passHref>
-            <a className="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center
-            text-base font-medium text-discal-blue hover:bg-discal-green hover:text-white">
-                Invite DisCal
-            </a>
-        </Link>
+        return (
+            <Link
+                href='/invite'
+                className="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center
+                text-base font-medium text-discal-blue hover:bg-discal-green hover:text-white">
+                    Invite DisCal
+            </Link>
+        );
     }
 
     function CTAImage(): JSX.Element {