From cff0b55aaf278d73bbfca6144e0f90ee0d4c7781 Mon Sep 17 00:00:00 2001
From: Diogo Soares <diogo.lsoares@gmail.com>
Date: Tue, 19 Dec 2023 10:11:11 +0100
Subject: [PATCH] refactor: component for Masthead footer

---
 src/components/common/Masthead/index.tsx | 51 ++++++++++++++----------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/components/common/Masthead/index.tsx b/src/components/common/Masthead/index.tsx
index aa6ca1234..27fae6b76 100644
--- a/src/components/common/Masthead/index.tsx
+++ b/src/components/common/Masthead/index.tsx
@@ -7,6 +7,33 @@ import css from './styles.module.css'
 import type { BaseBlock } from '@/components/Home/types'
 import ButtonsWrapper from '@/components/common/ButtonsWrapper'
 
+type FooterProps = {
+  text: string
+  logos: [
+    {
+      src: string
+      alt: string
+    },
+  ]
+}
+
+const Footer = ({ logos, text }: FooterProps) => {
+  if (!logos) return null
+
+  return (
+    <div className={css.footer}>
+      {text ? (
+        <Typography variant="caption" mr="-14px">
+          {text}
+        </Typography>
+      ) : null}
+      {logos.map((logo, index) => {
+        return <img src={logo.src} alt={logo.alt} key={index} />
+      })}
+    </div>
+  )
+}
+
 export const Masthead = ({
   title,
   buttons,
@@ -21,15 +48,7 @@ export const Masthead = ({
     alt: string
   }
   backgroundImage: { sm: string; md: string }
-  footer: {
-    text: string
-    logos: [
-      {
-        src: string
-        alt: string
-      },
-    ]
-  }
+  footer: FooterProps
 }): ReactElement => {
   const isSmallScreen = useMediaQuery('(max-width:900px)')
 
@@ -62,19 +81,7 @@ export const Masthead = ({
             </Grid>
           ) : null}
         </Grid>
-        {/* TODO: create a component? */}
-        {footer ? (
-          <div className={css.footer}>
-            {footer?.text ? (
-              <Typography variant="caption" mr="-14px">
-                {footer.text}
-              </Typography>
-            ) : null}
-            {footer?.logos.map((logo, index) => {
-              return <img src={logo.src} alt={logo.alt} key={index} />
-            })}
-          </div>
-        ) : null}
+        <Footer {...footer} />
       </div>
     </Container>
   )