SBIT-69: Modificar bannerHead para blogPage y Join-us

src/components/BannerHead/BannerHead.js

@@ -1,28 +1,31 @@
 import React from "react"
 import "./BannerHead.scss"
 import MarkdownView from "react-showdown"
+import { getImage, GatsbyImage } from "gatsby-plugin-image"
 
 const BannerHead = ({ data }) => {
 
     const title = data?.title;
-    const image = data?.image;
-    console.log(image)
+
+    const checkImage = () => {
+
+        if (data?.image[0]?.url) {
+            return <img src={data?.image[0]?.url} alt={data?.image[0]?.name} />
+        } else {
+            const image = getImage(data?.image[0]?.localFile)
+            return <GatsbyImage image={image} alt={`img-${title}`}></GatsbyImage>
+        }
+    }
+
     return (
         <div class="banner d-flex justify-content-center">
             <div class="banner__image">
-                {(image.length !== 0) && (
-                    <img
-                        src={image.url} alt={image.name}
-                    />
-                )}
-            </div>
-            <div class="banner__title">
-                <h1>
-                    {title && (
-                        <MarkdownView markdown={title} />
-                    )}
-                </h1>
+                {checkImage()}
             </div>
+
+            {title && (
+                <MarkdownView markdown={title} />
+            )}
         </div>
     )
 }

src/components/BlogPage/BlogContainer.js

@@ -3,7 +3,7 @@ import { useBlog } from "../../hooks"
 import Layout from "../../components/layout"
 import BlogGrid from "./BlogGrid/BlogGrid"
 import BlogArticle from "./BlogArticle/BlogArticle"
-import { Seo, BannerActionCall } from "../index"
+import { Seo, BannerHead } from "../index"
 
 import "./BlogContainer.scss"
 
@@ -13,11 +13,10 @@ const Blog = () => {
 
   const data = blogData?.allStrapiBlogCategory?.nodes
   const dataArticles = blogData?.allStrapiArticle?.nodes
-  const bannerActionCall = blogData?.allStrapiBlogPage?.nodes[0]?.actionCallBanner
-  const title = blogData?.allStrapiBlogPage?.nodes[0]?.title
-
+  const bannerHead = blogData?.allStrapiBlogPage?.nodes[0]?.bannerHead[0]
   const filterArticle = data.map(category => dataArticles.filter(article => category.name === article.blog_category.name))
 
+  console.log(bannerHead)
   const {
     pageTitle,
     pageDescription,
@@ -35,12 +34,9 @@ const Blog = () => {
       )}
       {data.length > 0 && (
         <div className="blog__container">
-          {title && (
-            <div className="banner__container">
-              <h3 dangerouslySetInnerHTML={{ __html: title }} />
-            </div>
-          )}
-
+
+          {bannerHead && <BannerHead data={bannerHead} />}
+
           {filterArticle?.map((category, idx) => (
             <BlogGrid key={idx} title={category[0]?.blog_category?.name}>
               {category.map((item, idx) => (
@@ -57,8 +53,6 @@ const Blog = () => {
           ))}
         </div>
       )}
-
-      {bannerActionCall && <BannerActionCall banner={bannerActionCall} />}
     </Layout>
   )
 }

src/components/index.js

@@ -5,7 +5,7 @@ import BannerLogo from "./Banners/BannerLogo"
 import BannerISO from "./Banners/BannerISO"
 import BannerClientes from "./Banners/BannerClientes"
 import BannerTop from "./Banners/BannerTop"
-import BannerActionCall from "./Banners/BannerActionCall"
+import BannerHead from "./BannerHead/BannerHead"
 import CasesSection from "./CasesSection/CasesSection"
 import CasesList from "./CasesSection/CasesList"
 
@@ -20,5 +20,5 @@ export {
   BannerISO,
   BannerClientes,
   BannerTop,
-  BannerActionCall,
+  BannerHead
 }

src/hooks/useBlog.js

@@ -27,33 +27,21 @@ const useBlog = () => {
       }
       allStrapiBlogPage {
         nodes {
-          title
           seo: pageMetadata {
             pageTitle
             pageKeywords
             pageDescription
           }
-          actionCallBanner {
+          bannerHead {
             title
-            link {
-              name
-              pathTo
-            }
             image {
               localFile {
                 childImageSharp {
                   gatsbyImageData
                 }
               }
             }
-            imageDarkMode {
-              localFile {
-                childImageSharp {
-                  gatsbyImageData
-                }
-              }
-            }
-          }
+          }          
         }
       }
     }