From d9803e124c99418aad44b883f3db61e982e8f4aa Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Thu, 8 Feb 2024 13:45:03 -0600
Subject: [PATCH 1/2] Replace custom link components with class string

---
 src/components/Footer.tsx | 153 +++++++++++++++++++++-----------------
 1 file changed, 83 insertions(+), 70 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index b7f815b..d3582c5 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,45 +1,7 @@
 import Image from 'next/image';
 import Link, { LinkProps } from 'next/link';
 
-interface StyledNextLinkBaseProps {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-type StyledNextLinkProps = StyledNextLinkBaseProps & LinkProps;
-
-const StyledNextLink = (props: StyledNextLinkProps) => {
-  const { className, children, ...rest } = props;
-  return (
-    <Link
-      {...props}
-      className={
-        'underline decoration-transparent hover:decoration-inherit transition ' + className ?? ''
-      }
-    >
-      {children ?? null}
-    </Link>
-  );
-};
-
-interface StyledALinkProps {
-  className?: string;
-  children?: React.ReactNode;
-  href?: string;
-}
-
-const StyledALink = (props: StyledALinkProps) => (
-  <a
-    href={props.href ?? ''}
-    target="_blank"
-    className={
-      'underline decoration-transparent hover:decoration-inherit transition ' + props.className ??
-      ''
-    }
-  >
-    {props.children ?? null}
-  </a>
-);
+const linkClasses = 'underline decoration-transparent hover:decoration-inherit transition';
 
 interface FooterProps {
   royalBg?: Boolean;
@@ -83,37 +45,73 @@ const Footer = (props: FooterProps) => {
       </div>
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-10">
         <div className="flex flex-col items-start gap-3">
-          <StyledNextLink href="/about">
+          <Link className={linkClasses} href="/about">
             <h3 className="text-xl font-semibold mb-4">About us</h3>
-          </StyledNextLink>
-          <StyledNextLink href="/about/mission">Mission</StyledNextLink>
-          <StyledNextLink href="/about/governance">Project Governance</StyledNextLink>
-          <StyledNextLink href="/membership">Membership</StyledNextLink>
-          <StyledNextLink href="/newsletter">Newsletter</StyledNextLink>
-          <StyledNextLink href="/contact">Contact Us</StyledNextLink>
+          </Link>
+          <Link className={linkClasses} href="/about/mission">
+            Mission
+          </Link>
+          <Link className={linkClasses} href="/about/governance">
+            Project Governance
+          </Link>
+          <Link className={linkClasses} href="/membership">
+            Membership
+          </Link>
+          <Link className={linkClasses} href="/newsletter">
+            Newsletter
+          </Link>
+          <Link className={linkClasses} href="/contact">
+            Contact Us
+          </Link>
         </div>
         <div className="flex flex-col items-start gap-3">
-          <StyledNextLink href="/projects">
+          <Link className={linkClasses} href="/projects">
             <h3 className="text-xl font-semibold mb-4">Projects</h3>
-          </StyledNextLink>
-          <StyledNextLink href="/projects/planner">Planner</StyledNextLink>
-          <StyledNextLink href="/projects/jupiter">Jupiter</StyledNextLink>
-          <StyledNextLink href="/projects/trends">Trends</StyledNextLink>
-          <StyledNextLink href="/projects/skedge">Skedge</StyledNextLink>
-          <StyledNextLink href="/projects/api">API & Platform</StyledNextLink>
+          </Link>
+          <Link className={linkClasses} href="/projects/planner">
+            Planner
+          </Link>
+          <Link className={linkClasses} href="/projects/jupiter">
+            Jupiter
+          </Link>
+          <Link className={linkClasses} href="/projects/trends">
+            Trends
+          </Link>
+          <Link className={linkClasses} href="/projects/skedge">
+            Skedge
+          </Link>
+          <Link className={linkClasses} href="/projects/api">
+            API & Platform
+          </Link>
         </div>
         <div className="flex flex-col items-start gap-3">
           <h3 className="text-xl font-semibold mb-4">Resources</h3>
-          <StyledNextLink href="/resources/roles">Roles</StyledNextLink>
-          <StyledNextLink href="/about/governance">Project Governance</StyledNextLink>
-          <StyledNextLink href="/resources/meetings">Meetings</StyledNextLink>
-          <StyledNextLink href="/resources/design-guide">Design Guide</StyledNextLink>
+          <Link className={linkClasses} href="/resources/roles">
+            Roles
+          </Link>
+          <Link className={linkClasses} href="/about/governance">
+            Project Governance
+          </Link>
+          <Link className={linkClasses} href="/resources/meetings">
+            Meetings
+          </Link>
+          <Link className={linkClasses} href="/resources/design-guide">
+            Design Guide
+          </Link>
         </div>
         <div className="flex flex-col items-start  gap-4 lg:ml-auto">
-          <a className="mb-6 hover:scale-105 transition" href="https://discord.gg/tcpcnfxmeQ">
+          <a
+            className="mb-6 hover:scale-105 transition"
+            href="https://discord.gg/tcpcnfxmeQ"
+            target="_blank"
+          >
             <Image src={'/join-discord-' + color + '.svg'} alt="discord" width="200" height="60" />
           </a>
-          <StyledALink className="flex items-center gap-2" href="https://instagram.com/utdnebula">
+          <a
+            className={linkClasses + ' flex items-center gap-2'}
+            href="https://instagram.com/utdnebula"
+            target="_blank"
+          >
             <Image
               src={'/instagram-' + color + '.svg'}
               alt="Instagram logo"
@@ -121,35 +119,50 @@ const Footer = (props: FooterProps) => {
               height="30"
             />
             Instagram
-          </StyledALink>
-          <StyledALink
-            className="flex items-center gap-2"
+          </a>
+          <a
+            className={linkClasses + ' flex items-center gap-2'}
             href="https://linkedin.com/company/utdnebula"
+            target="_blank"
           >
             <Image src={'/linkedin-' + color + '.svg'} alt="LinkedIn logo" width="30" height="30" />
             LinkedIn
-          </StyledALink>
-          <StyledALink className="flex items-center gap-2" href="https://github.com/utdnebula">
+          </a>
+          <a
+            className={linkClasses + ' flex items-center gap-2'}
+            href="https://github.com/utdnebula"
+            target="_blank"
+          >
             <Image src={'/github-' + color + '.svg'} alt="GitHub logo" width="30" height="30" />
             GitHub
-          </StyledALink>
+          </a>
         </div>
       </div>
       <div className="md:pt-40 pt-10">
         <div className={'border-t-2 ' + (royalBg ? 'border-white' : 'border-black')} />
         <div className="flex md:flex-row flex-col justify-between gap-8 pt-8">
           <div className="flex gap-x-8 gap-y-1 justify-around md:justify-normal flex-wrap">
-            <StyledNextLink href="/legal/terms-of-service.txt">Terms of Service</StyledNextLink>
-            <StyledNextLink href="/legal/privacy-policy.txt">Privacy Policy</StyledNextLink>
-            <StyledNextLink href="/sitemap.xml">Sitemap</StyledNextLink>
+            <Link className={linkClasses} href="/legal/terms-of-service.txt">
+              Terms of Service
+            </Link>
+            <Link className={linkClasses} href="/legal/privacy-policy.txt">
+              Privacy Policy
+            </Link>
+            <Link className={linkClasses} href="/sitemap.xml">
+              Sitemap
+            </Link>
           </div>
           <div className="md:text-right text-center text-xs">
             <p>© 2023 Nebula Labs Maintainers. All rights reserved.</p>
             <p>
               Site design by{' '}
-              <StyledALink className="font-bold" href="https://hilary-nguyen.com/">
+              <a
+                className={linkClasses + ' font-bold'}
+                href="https://hilary-nguyen.com/"
+                target="_blank"
+              >
                 Hilary Nguyen
-              </StyledALink>
+              </a>
             </p>
           </div>
         </div>

From a0a9ee200031419bf43500ac9a7ebaead0baa43e Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Thu, 8 Feb 2024 13:47:29 -0600
Subject: [PATCH 2/2] Remove LinkProps

---
 src/components/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d3582c5..1d38288 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import Link, { LinkProps } from 'next/link';
+import Link from 'next/link';
 
 const linkClasses = 'underline decoration-transparent hover:decoration-inherit transition';