feat: link external icon

nventive · Aug 7, 2024 · a30eff7 · a30eff7
1 parent 5225346
commit a30eff7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/frontend/src/app/components/link/Link.tsx b/frontend/src/app/components/link/Link.tsx
@@ -1,3 +1,4 @@
+import ExternalLinkOutlined from "@icons/ExternalLinkOutlined";
 import { LinkProps, Link as MuiLink, styled } from "@mui/material";
 import style from "@styles/style.module.scss";
 
@@ -8,14 +9,27 @@ const StyledMuiLink = styled(MuiLink)({
   cursor: "pointer",
 });
 
+interface ILink extends LinkProps {
+  external?: boolean;
+}
+
 export default function Link({
   children,
   underline = "hover",
+  external,
+  rel,
+  target,
   ...props
-}: LinkProps) {
+}: ILink) {
   return (
-    <StyledMuiLink underline={underline} {...props}>
+    <StyledMuiLink
+      {...props}
+      underline={underline}
+      rel={rel || external ? "noreferrer" : undefined}
+      target={target || external ? "_blank" : undefined}
+    >
       {children}
+      {external && <ExternalLinkOutlined className="ml-xxs" />}
     </StyledMuiLink>
   );
 }
diff --git a/frontend/src/app/containers/cookieConsent/cookieBanner/CookieBanner.tsx b/frontend/src/app/containers/cookieConsent/cookieBanner/CookieBanner.tsx
@@ -37,8 +37,7 @@ export default function CookieBanner({
                 <Link
                   href={t("cookie_consent_link")}
                   underline="always"
-                  target="_blank"
-                  rel="noreferrer"
+                  external
                 >
                   <Typography.Body2>
                     {t("cookie_consent__learn_more")}

diff --git a/frontend/src/app/containers/cookieConsent/cookieModal/CookieModal.tsx b/frontend/src/app/containers/cookieConsent/cookieModal/CookieModal.tsx
@@ -85,8 +85,7 @@ export default function CookieModal({
             className="mr-a"
             href={t("cookie_consent_link")}
             underline="always"
-            target="_blank"
-            rel="noreferrer"
+            external
           >
             <Typography.Body2>
               {t("cookie_consent__learn_more")}

diff --git a/frontend/src/app/pages/login/Login.tsx b/frontend/src/app/pages/login/Login.tsx
@@ -34,13 +34,8 @@ export default function Login() {
           <Typography.Body1 className="color-basic-body mb-xxs">
             Password: oliviawpass
           </Typography.Body1>
-          <Link
-            href="https://dummyjson.com/users"
-            target="_blank"
-            rel="noreferrer"
-          >
+          <Link href="https://dummyjson.com/users" external>
             <Typography.Body2>{t("login__more_user")}</Typography.Body2>
-            <ExternalLinkOutlined className="ml-xxs" />
           </Link>
         </div>
         <LoginForm setIsLoading={setIsLoading} />