Hero.tsx

import * as React from 'react'
import Img from 'gatsby-image'
import { renameProp, renameKeys } from '../../utils/renameprop'
import HeroText from './heroText'
import './hero.css'

interface IHeroProps {
  heroImg?: object
}

const Hero: React.SFC<IHeroProps> = ({
  heroImg,
  heroText,
  addText,
  heroTextPos,
  heroLink
}) => {
  const webPsrc = renameKeys(heroImg.webp, {
    srcSet: 'srcSetWebp',
    src: 'srcWebP'
  })

  const heroFluid = { ...heroImg.png, ...webPsrc }

  return (
    <section>

      {addText ? <a href="#" className="hero-link"> : null}

      <div className={`hero ${addText ? '${heroTextPos}' : null}`}>
        <Img
          fluid={heroFluid}
          style={{
            position: 'absolute',
            width: '100%',
            height: '100%',
            left: 0
          }}
        />

        {addText ? (
          <HeroText heroText={heroText} />
        ) : null}

        {addText ? </a> : null}
      </div>
    </section>
  )
}
export default Hero