{"version":3,"file":"components-slpBackgroundImageWithTitle-slpBackgroundImageWithTitle-e300d875c9065707f34e.js","mappings":"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","sources":["webpack://islandpetro/./src/components/slpBackgroundImageWithTitle/slpBackgroundImageWithTitle.js","webpack://islandpetro/./src/components/slpBackgroundImageWithTitle/slpBackgroundImageWithTitleStyles.js"],"sourcesContent":["import React from 'react';\nimport useContentfulAssets from '../../hooks/useContentfulAssets';\nimport * as Styled from './slpBackgroundImageWithTitleStyles';\nimport { BLOCKS } from '@contentful/rich-text-types';\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer';\n\nfunction SlpBackgroundImageWithTitle({ sectionData }) {\n  const optionsMainStyle = {\n    renderNode: {\n      [BLOCKS.EMBEDDED_ASSET]: (node) => {\n        const asset = useContentfulAssets(node?.data?.target?.sys?.id);\n        return asset?.node?.file?.url?.includes('image') ? (\n          <Styled.ImageStyle\n            src={asset?.node?.file?.url}\n            alt={asset?.node?.title}\n          />\n        ) : (\n          <></>\n        );\n      },\n    },\n    renderText: (text) =>\n      text?.split('\\n').flatMap((text, i) => [i > 0 && <br key={i} />]),\n  };\n\n  return (\n    <Styled.ImageStyle $background={sectionData?.image?.file?.url}>\n      {sectionData?.headerWithText && (\n        <Styled.HeadingContainer>\n          {sectionData?.headerWithText && (\n            <div>\n              <Styled.Heading>\n                {sectionData?.headerWithText?.headerText}\n              </Styled.Heading>\n              <Styled.SpanHeading>\n                {sectionData?.headerWithText?.text?.text}\n              </Styled.SpanHeading>\n            </div>\n          )}\n        </Styled.HeadingContainer>\n      )}\n      {sectionData?.assets && sectionData?.assets[0] && (\n        <Styled.ImageContainer>\n          {sectionData?.assets[0]?.file?.url && (\n            <Styled.FloatImageStyle\n              src={sectionData?.assets[0]?.file?.url}\n            ></Styled.FloatImageStyle>\n          )}\n        </Styled.ImageContainer>\n      )}\n      {sectionData?.assets && sectionData?.assets[1] && (\n        <Styled.ImageContainer>\n          {sectionData?.assets[1]?.file?.url && (\n            <Styled.FloatImageStyle\n              src={sectionData?.assets[1]?.file?.url}\n            ></Styled.FloatImageStyle>\n          )}\n        </Styled.ImageContainer>\n      )}\n      {sectionData?.contentDetails &&\n        documentToReactComponents(\n          JSON.parse(sectionData?.contentDetails?.raw),\n          optionsMainStyle\n        )}\n    </Styled.ImageStyle>\n  );\n}\nexport default SlpBackgroundImageWithTitle;\n","import styled from 'styled-components';\n\nexport const ImageStyle = styled.div`\n  background: url(${(props) => props.$background}) repeat-x bottom center;\n  height: 690px;\n  margin: 0 0 40px 0;\n  @media (max-width: 991px) {\n    background-size: 1200px;\n    height: 470px;\n    margin: 0;\n  }\n`;\nexport const HeaderH2 = styled.h2`\n  text-align: center !important;\n  position: relative;\n  margin: 0 0 35px 0;\n  font-family: 'Figtree-Black', arial, sans-serif;\n  font-size: 45px;\n  line-height: 50px;\n  color: #fff;\n  span {\n    color: #fec119;\n  }\n  @media (max-width: 1399px) {\n    font-size: 40px;\n    line-height: 45px;\n    margin-bottom: 30px;\n  }\n  @media (max-width: 767px) {\n    font-size: 30px;\n    line-height: 35px;\n  }\n`;\n\nexport const TitleDiv = styled.div`\n  position: absolute;\n  text-align: center !important;\n  width: 100%;\n  top: 280px;\n`;\nexport const Heading = styled.h1`\n  text-align: center;\n  position: relative;\n  font-family: 'Figtree-Black', arial, sans-serif;\n  font-size: 4vw;\n  line-height: 4vw;\n  color: #fff;\n  display: inline;\n  code {\n    color: #ffc905;\n    font-family: 'Figtree-Black', arial, sans-serif;\n    font-size: 4vw;\n    line-height: 4vw;\n  }\n  @media (max-width: 1199px) {\n    font-size: 74px;\n    line-height: 74px;\n    code {\n      font-size: 74px;\n      line-height: 74px;\n      color: #ffc905;\n      font-family: 'Figtree-Black', arial, sans-serif;\n    }\n  }\n  @media (max-width: 991px) {\n    font-size: 45px;\n    line-height: 45px;\n    margin-bottom: 30px;\n    code {\n      font-size: 45px;\n      line-height: 45px;\n      color: #ffc905;\n      font-family: 'Figtree-Black', arial, sans-serif;\n    }\n  }\n  @media (max-width: 767px) {\n    font-size: 45px;\n    line-height: 45px;\n    code {\n      font-size: 45px;\n      line-height: 45px;\n      color: #ffc905;\n      font-family: 'Figtree-Black', arial, sans-serif;\n    }\n  }\n`;\nexport const SpanHeading = styled.h1`\n  text-align: center;\n  position: relative;\n  font-family: 'Figtree-Black', arial, sans-serif;\n  font-size: 4vw;\n  line-height: 4vw;\n  color: #ffc905;\n  display: inline;\n  code {\n    color: #ffc905;\n    font-family: 'Figtree-Black', arial, sans-serif;\n    font-size: 4vw;\n    line-height: 4vw;\n  }\n  @media (max-width: 1199px) {\n    font-size: 74px;\n    line-height: 74px;\n    code {\n      font-size: 74px;\n      line-height: 74px;\n      color: #ffc905;\n      font-family: 'Figtree-Black', arial, sans-serif;\n    }\n  }\n  @media (max-width: 991px) {\n    font-size: 45px;\n    line-height: 45px;\n    margin-bottom: 30px;\n    code {\n      font-size: 45px;\n      line-height: 45px;\n      color: #ffc905;\n      font-family: 'Figtree-Black', arial, sans-serif;\n    }\n  }\n  @media (max-width: 767px) {\n    font-size: 45px;\n    line-height: 45px;\n    code {\n      font-size: 45px;\n      line-height: 45px;\n      color: #ffc905;\n      font-family: 'Figtree-Black', arial, sans-serif;\n    }\n  }\n`;\nexport const HeadingContainer = styled.div`\n  position: absolute;\n  width: 100%;\n  text-align: center;\n  top: 320px;\n  @media (max-width: 991px) {\n    top: 170px;\n  }\n`;\nexport const FloatImageStyle = styled.img`\n  max-width: 400px;\n  height: auto;\n  @media (max-width: 991px) {\n    display: block;\n    max-width: 300px;\n    width: 100%;\n    height: auto;\n    padding-top: 30px;\n    padding-bottom: 30px;\n    margin: 0 auto;\n  }\n`;\nexport const ImageContainer = styled.div`\n  width: 100%;\n  height: auto;\n  margin: 0 auto;\n  padding: 40px 0px 0px 0px;\n  text-align: center;\n  @media (max-width: 991px) {\n    padding: 0px 35px 10px 35px;\n  }\n`;\n"],"names":["_ref","_sectionData$image","_sectionData$image$fi","_sectionData$headerWi","_sectionData$headerWi2","_sectionData$headerWi3","_sectionData$assets$","_sectionData$assets$$","_sectionData$assets$2","_sectionData$assets$3","_sectionData$assets$4","_sectionData$assets$5","_sectionData$assets$6","_sectionData$assets$7","_sectionData$contentD","sectionData","optionsMainStyle","renderNode","BLOCKS","EMBEDDED_ASSET","node","_node$data","_node$data$target","_node$data$target$sys","_asset$node","_asset$node$file","_asset$node$file$url","_asset$node2","_asset$node2$file","_asset$node3","asset","useContentfulAssets","data","target","sys","id","file","url","includes","React","Styled","src","alt","title","renderText","text","split","flatMap","i","key","$background","image","headerWithText","headerText","assets","contentDetails","documentToReactComponents","JSON","parse","raw","ImageStyle","styled","div","withConfig","displayName","componentId","props","HeaderH2","h2","TitleDiv","Heading","h1","SpanHeading","HeadingContainer","FloatImageStyle","img","ImageContainer"],"sourceRoot":""}