diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index 7d8b2d3..058633e 100644 --- a/src/components/Banner/Banner.js +++ b/src/components/Banner/Banner.js @@ -9,7 +9,8 @@ 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 + const defaultOptions = { loop: true, @@ -39,14 +40,27 @@ const Banner = ({ data }) => { dangerouslySetInnerHTML={{ __html: summary }} /> } - {button && ( - + {Array.isArray(arrayButtons) && arrayButtons.length > 0 && ( +
+ {arrayButtons.map((btn, index) => ( + + ))} +
)} + {button && ( + + )} @@ -81,6 +95,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, diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index 5313508..4bb3726 100644 --- a/src/components/Banner/Banner.scss +++ b/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; diff --git a/src/hooks/useHomePage.js b/src/hooks/useHomePage.js index db3a69f..648b59a 100644 --- a/src/hooks/useHomePage.js +++ b/src/hooks/useHomePage.js @@ -152,6 +152,14 @@ const useHomePage = () => { slug } } + arrayButtons { + content + + english_landing_page { + id + slug + } + } backgroundImageDark { url } diff --git a/src/schema/generalSchema.js b/src/schema/generalSchema.js index 1aa7c23..8a68b42 100644 --- a/src/schema/generalSchema.js +++ b/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 diff --git a/src/templates/LandingPage.js b/src/templates/LandingPage.js index 9e5b589..944cbc5 100644 --- a/src/templates/LandingPage.js +++ b/src/templates/LandingPage.js @@ -234,6 +234,14 @@ export const query = graphql` slug } } + arrayButtons { + content + + english_landing_page { + id + slug + } + } backgroundImageDark { url }