kleros · alcercu · Jan 30, 2025 · Jan 30, 2025
diff --git a/frontend/src/app/for-lawyers/components/Hero.tsx b/frontend/src/app/for-lawyers/components/Hero.tsx
@@ -2,9 +2,9 @@ import React from "react";
 
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
 import ExternalLink from "@/components/ExternalLink";
 import { request } from "@/utils/graphQLClient";
 
@@ -24,16 +24,11 @@ const Hero: React.FC = async () => {
         <p className="max-w-[685px] text-lg">{subtitle}</p>
         <div className="flex flex-wrap gap-6">
           {buttons.map((button) => (
-            <Link
-              key={button.text}
-              href={button.link.url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <CustomLink key={button.text} href={button.link.url}>
               <Button variant="secondary">
                 <span>{button.text}</span>
               </Button>
-            </Link>
+            </CustomLink>
           ))}
         </div>
         <ExternalLink

diff --git a/frontend/src/app/home/components/Hero.tsx b/frontend/src/app/home/components/Hero.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
 import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
 import { request } from "@/utils/graphQLClient";
 
 import { HeroQueryType, heroQuery } from "../queries/hero";
@@ -26,33 +26,21 @@ const Hero: React.FC = async () => {
         <h1 className="text-2xl lg:text-3xl">{title}</h1>
         <p className="text-lg">{subtitle}</p>
         <div className="lg:hidden">
-          <Link
-            href={primaryButton.link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <CustomLink href={primaryButton.link.url}>
             <Button>
               <span className="text-background-2"> {primaryButton.text} </span>
             </Button>
-          </Link>
+          </CustomLink>
         </div>
         <div>
-          <Link
-            href={secondaryButton.link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <CustomLink href={secondaryButton.link.url}>
             <Button variant="secondary">
               <span>{secondaryButton.text}</span>
             </Button>
-          </Link>
+          </CustomLink>
         </div>
         <div>
-          <Link
-            href={arrowLink.link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <CustomLink href={arrowLink.link.url}>
             <span className="mr-4">{arrowLink.text}</span>
             <Image
               src={LinkArrow}
@@ -61,7 +49,7 @@ const Hero: React.FC = async () => {
               alt="Arrow link image"
               className="inline"
             />
-          </Link>
+          </CustomLink>
         </div>
       </div>
       <Image

diff --git a/frontend/src/app/home/components/LearnPosts.tsx b/frontend/src/app/home/components/LearnPosts.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 
-import Link from "next/link";
-
 import CtaCard from "@/components/CtaCard";
+import CustomLink from "@/components/CustomLink";
 import { request } from "@/utils/graphQLClient";
 
 import {
@@ -34,12 +33,12 @@ const LearnPosts: React.FC = async () => {
           <p className="text-center text-base lg:text-lg">
             {introduction.heading_text}
             <br />
-            <Link
+            <CustomLink
               className="text-primary-blue"
               href={introduction.link.link.url}
             >
               {introduction.link.text}
-            </Link>
+            </CustomLink>
             <br />
             {introduction.closing_text}
           </p>

diff --git a/frontend/src/app/home/components/TrustedBy.tsx b/frontend/src/app/home/components/TrustedBy.tsx
@@ -2,8 +2,8 @@ import React from "react";
 
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
+import CustomLink from "@/components/CustomLink";
 import { request } from "@/utils/graphQLClient";
 
 import { partnersQuery, PartnersQueryType } from "../queries/trusted-by";
@@ -33,20 +33,15 @@ const TrustedBy: React.FC = async () => {
         )}
       >
         {institutions.map(({ name, link, image }) => (
-          <Link
-            key={name}
-            href={link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <CustomLink key={name} href={link.url}>
             <Image
               src={image.url}
               alt={name}
               width="1"
               height="1"
               className="h-auto w-auto"
             />
-          </Link>
+          </CustomLink>
         ))}
       </div>
     </div>

diff --git a/frontend/src/components/BrandAssets/Hero.tsx b/frontend/src/components/BrandAssets/Hero.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
 import { HeroQueryType } from "@/queries/brand-assets/hero";
 
+import CustomLink from "../CustomLink";
+
 interface IHero {
   heroData: HeroQueryType["brandAssetsPageHero"];
 }
@@ -17,15 +18,11 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <h1 className="w-min text-3xl">{heroData.header}</h1>
         <p className="text-lg">{heroData.subtitle}</p>
         <div>
-          <Link
-            href={heroData.button?.link?.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <CustomLink href={heroData.button?.link?.url}>
             <Button variant="secondary">
               <span>{heroData.button?.text}</span>
             </Button>
-          </Link>
+          </CustomLink>
         </div>
       </div>
       <Image

diff --git a/frontend/src/components/BrandAssets/LogosPackageSection.tsx b/frontend/src/components/BrandAssets/LogosPackageSection.tsx
@@ -1,8 +1,7 @@
-import Link from "next/link";
-
 import { LogosPackageSectionQueryType } from "@/queries/brand-assets/logos-package-section";
 
 import Button from "../Button";
+import CustomLink from "../CustomLink";
 import ExternalLink from "../ExternalLink";
 
 interface ILogosPackageSection {
@@ -17,17 +16,13 @@ const LogosPackageSection: React.FC<ILogosPackageSection> = ({
       <h1 className="w-min text-3xl">{logosPackageData.header}</h1>
       <p className="text-lg text-secondary-text">{logosPackageData.subtitle}</p>
       <div>
-        <Link
-          href={logosPackageData.button?.link?.url}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+        <CustomLink href={logosPackageData.button?.link?.url}>
           <Button variant="primary">
             <span className="text-background-2">
               {logosPackageData.button?.text}
             </span>
           </Button>
-        </Link>
+        </CustomLink>
       </div>
       <ExternalLink
         url={logosPackageData.arrowLink.link.url}

diff --git a/frontend/src/components/Community/CommunityCard.tsx b/frontend/src/components/Community/CommunityCard.tsx
@@ -1,11 +1,12 @@
 import Image from "next/image";
-import Link from "next/link";
 
 import { Community } from "@/queries/community/hero";
 
+import CustomLink from "../CustomLink";
+
 const CommunityCard: React.FC<Community> = ({ title, subtitle, icon, url }) => {
   return (
-    <Link href={url} target="_blank" rel="noreferrer noopener">
+    <CustomLink href={url}>
       <div className="flex min-h-[326px] flex-col items-center justify-center rounded-2xl border border-stroke bg-background-2 hover:scale-[1.01]">
         <Image
           src={icon.url}
@@ -19,7 +20,7 @@ const CommunityCard: React.FC<Community> = ({ title, subtitle, icon, url }) => {
         </h2>
         <label className="text-base text-secondary-text">{subtitle}</label>
       </div>
-    </Link>
+    </CustomLink>
   );
 };
 

diff --git a/frontend/src/components/Community/hero.tsx b/frontend/src/components/Community/hero.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
 import { HeroQueryType } from "@/queries/community/hero";
 
+import CustomLink from "../CustomLink";
+
 interface IHero {
   heroData: HeroQueryType["communityPageHero"];
 }
@@ -21,16 +22,11 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <p className="text-lg">{subtitle}</p>
         <div className="flex flex-wrap items-center gap-6">
           {communityButtons.map((button) => (
-            <Link
-              key={button.text}
-              href={button.link.url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <CustomLink key={button.text} href={button.link.url}>
               <Button variant="secondary">
                 <span>{button.text}</span>
               </Button>
-            </Link>
+            </CustomLink>
           ))}
         </div>
       </div>

diff --git a/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx b/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
@@ -4,9 +4,9 @@ import { useState } from "react";
 
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
 import { Report } from "@/queries/cooperative/report-section";
 
 import DropdownContainer from "./DropdownContainer";
@@ -53,15 +53,15 @@ const ReportCard: React.FC<IReportCard> = ({
           }}
         />
 
-        <Link href={reportUrl ?? ""} target="_blank" rel="noreferrer noopener">
+        <CustomLink href={reportUrl ?? ""}>
           <Button
             variant="primary"
             className="text-background-1"
             disabled={typeof reportUrl === "undefined"}
           >
             {downloadButtonText}
           </Button>
-        </Link>
+        </CustomLink>
       </div>
 
       <div

diff --git a/frontend/src/components/Cooperative/hero.tsx b/frontend/src/components/Cooperative/hero.tsx
@@ -1,12 +1,13 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
 import ExternalLink from "@/components/ExternalLink";
 import { HeroQueryType } from "@/queries/cooperative/hero";
 
+import CustomLink from "../CustomLink";
+
 interface IHero {
   heroData: HeroQueryType["cooperativePageHero"];
 }
@@ -22,16 +23,11 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <p className="max-w-[685px] text-lg">{subtitle}</p>
         <div className="flex flex-wrap items-center gap-6">
           {buttons.map((button) => (
-            <Link
-              key={button.text}
-              href={button.link.url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <CustomLink key={button.text} href={button.link.url}>
               <Button variant="secondary">
                 <span>{button.text}</span>
               </Button>
-            </Link>
+            </CustomLink>
           ))}
         </div>
         <ExternalLink

diff --git a/frontend/src/components/CtaBox.tsx b/frontend/src/components/CtaBox.tsx
@@ -2,10 +2,11 @@ import React from "react";
 
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
 
+import CustomLink from "./CustomLink";
+
 interface ICtaBox {
   background: {
     url: string;
@@ -37,11 +38,11 @@ const CtaBox: React.FC<ICtaBox> = ({ background, header, button }) => {
         <h2 className="mb-8 text-center text-lg text-primary-text lg:text-xl">
           {header}
         </h2>
-        <Link href={button.link.url} target="_blank" rel="noopener noreferrer">
+        <CustomLink href={button.link.url}>
           <Button>
             <span className="text-background-2"> {button.text} </span>
           </Button>
-        </Link>
+        </CustomLink>
       </div>
     </div>
   );

diff --git a/frontend/src/components/CustomLink.tsx b/frontend/src/components/CustomLink.tsx
@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+interface ICustomLink extends React.ComponentProps<typeof Link> {
+  children: React.ReactNode;
+}
+
+const CustomLink: React.FC<ICustomLink> = ({ children, href, ...props }) => (
+  <Link
+    {...{ href }}
+    {...props}
+    {...(isExternal(href.toString())
+      ? { target: "_blank", rel: "noopener noreferrer" }
+      : undefined)}
+  >
+    {children}
+  </Link>
+);
+
+const isExternal = (url: string) => /^https?:\/\//.test(url);
+
+export default CustomLink;