46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
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>
|
|
)
|
|
}
|