From ae1a1d7e7e1ab6af73f372193d72eb346419ff53 Mon Sep 17 00:00:00 2001
From: Anna Hughes <annaraehughes@live.co.uk>
Date: Tue, 5 Mar 2024 13:00:20 +0000
Subject: [PATCH] feat: add external link icon (#866)

---
 components/common/Link.tsx   | 24 ++++++++++++++++++++++--
 components/layout/Footer.tsx |  2 +-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/components/common/Link.tsx b/components/common/Link.tsx
index 977f2ecff..13d1fdc56 100644
--- a/components/common/Link.tsx
+++ b/components/common/Link.tsx
@@ -1,3 +1,4 @@
+import OpenInNew from '@mui/icons-material/OpenInNew';
 import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
@@ -74,11 +75,30 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
     typeof href === 'string' && (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0);
 
   if (isExternal) {
+    const hasImageElements = React.Children.toArray(other.children).find((child) => {
+      if (typeof child === 'string' || typeof child === 'number' || Array.isArray(child))
+        return false;
+
+      child = child as React.ReactElement;
+
+      return !!child.props.src && !!child.props.alt;
+    });
+
     if (unstyled) {
-      return <Anchor className={className} href={href} ref={ref} {...other} />;
+      return (
+        <Anchor className={className} href={href} ref={ref} {...other}>
+          {!hasImageElements && <OpenInNew fontSize="small" sx={{ mb: -0.5, mr: 0.3 }} />}
+          {other.children}
+        </Anchor>
+      );
     }
 
-    return <MuiLink className={className} href={href} ref={ref} {...other} />;
+    return (
+      <MuiLink className={className} href={href} ref={ref} {...other}>
+        {!hasImageElements && <OpenInNew fontSize="small" sx={{ mb: -0.5, mr: 0.3 }} />}
+        {other.children}
+      </MuiLink>
+    );
   }
 
   if (unstyled) {
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index 6f24ef1bc..1011f65d1 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -138,7 +138,7 @@ const Footer = () => {
 
   return (
     <>
-      <Container sx={footerContainerStyle}>
+      <Container sx={footerContainerStyle} component="footer">
         <Box width="100%" mb={3}>
           <Image alt={tS('alt.bloomLogo')} src={bloomLogo} width={140} height={60} />
         </Box>