depot/web/lukegbcom/lib/HeroImage/index.js

import styles from './index.module.scss'
import { resolveImageURL } from '../images'

function processHeroURL(url, currentURL) {
  return resolveImageURL(url, currentURL);
}

function gradient(gradientName) {
  switch (gradientName) {
    case true, 'bottom-black':
      return 'linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(20, 20, 20, 1))'
    case 'top-black':
      return 'linear-gradient(180deg,#111,hsla(228,2%,56%,.2))'
    case 'top-blue':
      return 'linear-gradient(180deg,#107491,rgba(0,122,204,.2))'
  }
  console.error(`invalid withGradient in HeroImage: ${gradientName}`)
}

function computeBackground({ withGradient, image }) {
  if (image) {
    return {
      background: `${withGradient ? gradient(withGradient) + ', ' : ''} #111 url(${processHeroURL(image)}) 50% 50% / cover`
    }
  }
  return {
    backgroundColor: '#46be77',
    background: 'linear-gradient(180deg,#107491,rgba(0,122,204,.2)), radial-gradient(ellipse at 50% 50%,#6ccb94 15%,#46be77 70%)',
  }
}

export default function HeroImage(props) {
  return (
    <div className={`${styles.container} ${props.fullHeight ? styles.fullHeight : ''}`}
      style={computeBackground(props)}>
      <div className={styles.heroCard}>
        <h1 className={styles.heroTitle}>
          {props.children}
        </h1>
      </div>
      {props.credit && (<div className={styles.heroCredit}>
        <span>Photo:</span> <a href={props.credit.url}>{props.credit.text}</a>
      </div>)}
    </div>
  )
}