SBIT-576 se agregan los botones de partners

Author: JuanaBalduini

src/components/Banner/Banner.js

@@ -9,7 +9,9 @@ import CustomImage from "../CustomImage/CustomImage"
 
 const Banner = ({ data }) => {
   const { theme } = useTheme()
-  const { title, variant, summary, animation, image, imageDark, button } = data
+  const { title, variant, summary, animation, image, imageDark, arrayButtons, button } = data
+
+  console.log("arrayButtons:", arrayButtons)
 
   const defaultOptions = {
     loop: true,
@@ -39,14 +41,27 @@ const Banner = ({ data }) => {
                 dangerouslySetInnerHTML={{ __html: summary }}
               />
             }
-            {button && (
-              <CustomLink
-                content={button?.content}
-                url={button?.url}
-                landing={button?.english_landing_page}
-                className={"button"}
-              />
+            {Array.isArray(arrayButtons) && arrayButtons.length > 0 && (
+              <div className="banner__buttons">
+                {arrayButtons.map((btn, index) => (
+                  <CustomLink
+                    key={index}
+                    content={btn.content}
+                    url={btn.url}
+                    landing={btn.english_landing_page}
+                    className="button"
+                  />
+                ))}
+              </div>
             )}
+            {button && (
+                <CustomLink
+                  content={button.content}
+                  url={button?.url}
+                  landing={button?.landing_page}
+                  className={'button'}
+                />
+              )}
           </div>
         </div>
 
@@ -81,6 +96,15 @@ Banner.propTypes = {
     title: PropTypes.string.isRequired,
     variant: PropTypes.string.isRequired,
     summary: PropTypes.string,
+    arrayButtons: PropTypes.arrayOf(
+    PropTypes.shape({
+      content: PropTypes.string,
+      url: PropTypes.string,
+      english_landing_page: PropTypes.shape({
+        slug: PropTypes.string.isRequired,
+      }),
+    })
+  ),
     button: PropTypes.shape({
       content: PropTypes.string.isRequired,
       url: PropTypes.string,

src/components/Banner/Banner.scss

@@ -170,6 +170,8 @@
   &.diagonalReverse {
     .banner__wrapper {
       margin: 32px auto;
+      display: flex;
+      flex-direction: column;
     }
 
     .imagen {
@@ -184,13 +186,22 @@
       }
     }
 
+     .banner__buttons{
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      padding-top: 25px;
+      padding-right: 10px;
+    }
+    
     .button {
-      margin-top: 20px;
-      margin-bottom: 20px;
-      display: inline-block;
-      color: #607ee7;
-      text-decoration: underline;
-      padding-left: 5px;
+      color:$primary;
+        
+      @include primaryBtn;
+      display: block;
+      width: max-content;
+      padding: 10px 15px;
+      margin-right: 20px;
     }
 
     .title {
@@ -356,9 +367,7 @@
         }
       }
 
-      .button {
-        padding-left: 5rem;
-      }
+      
 
       .title {
         display: flex;

src/hooks/useHomePage.js

@@ -152,6 +152,14 @@ const useHomePage = () => {
                 slug
               }
             }
+            arrayButtons {
+              content
+              
+              english_landing_page {
+                id
+                slug
+              }
+            }  
             backgroundImageDark {
               url
             }

src/schema/generalSchema.js

@@ -96,7 +96,7 @@ const generalSchema = `
 
   type ComponentButton {
     id: Int
-    content: String!
+    content: String
     url: String
     english_landing_page: StrapiEnglishLandingPage
   }
@@ -196,6 +196,7 @@ const generalSchema = `
     summary: String
     image: LocalFile 
     button: ComponentButton
+    arrayButtons: [ComponentButton]
     imageDark: LocalFile 
     animation: JSON
     navTitle: String

src/templates/LandingPage.js

@@ -234,6 +234,14 @@ export const query = graphql`
               slug
             }
           }
+            arrayButtons {
+              content
+        
+              english_landing_page {
+                id
+                slug
+              }
+            }
           backgroundImageDark {
             url
           }