86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import React from 'react'
|
|
import type { FDHeroBlock as FDHeroBlockProps, Media } from '@/payload-types'
|
|
|
|
export const FDHeroBlockComponent: React.FC<FDHeroBlockProps> = ({
|
|
heading,
|
|
subheading,
|
|
body,
|
|
ctaText,
|
|
ctaLink = '#',
|
|
secondaryCtaText,
|
|
secondaryCtaLink = '#',
|
|
backgroundImage,
|
|
overlayOpacity = '50',
|
|
textColor = 'auto',
|
|
theme = 'light',
|
|
}) => {
|
|
const media = backgroundImage as Media | undefined
|
|
const bgImageUrl = media?.url || ''
|
|
const hasBgImage = Boolean(bgImageUrl)
|
|
const isDark = hasBgImage || theme === 'dark'
|
|
|
|
let headingColor: string
|
|
let textBodyColor: string
|
|
if (textColor === 'white') {
|
|
headingColor = 'text-white'
|
|
textBodyColor = 'text-white'
|
|
} else if (textColor === 'navy') {
|
|
headingColor = 'text-fd-navy'
|
|
textBodyColor = 'text-fd-navy'
|
|
} else {
|
|
headingColor = isDark ? 'text-fd-yellow' : 'text-fd-navy'
|
|
textBodyColor = isDark ? 'text-white' : 'text-fd-navy'
|
|
}
|
|
|
|
const overlayClass =
|
|
overlayOpacity === '30' ? 'bg-black/30' : overlayOpacity === '70' ? 'bg-black/70' : 'bg-black/50'
|
|
|
|
const secondaryBtnClass =
|
|
isDark && textColor !== 'navy' ? 'fd-btn-secondary-dark' : 'fd-btn-secondary'
|
|
|
|
return (
|
|
<section
|
|
className={`relative w-full py-16 md:py-20 lg:py-[99px] ${hasBgImage ? '' : isDark ? 'bg-fd-navy' : 'bg-white'} overflow-hidden`}
|
|
>
|
|
{hasBgImage && (
|
|
<>
|
|
<img
|
|
src={bgImageUrl}
|
|
alt=""
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
aria-hidden="true"
|
|
/>
|
|
<div className={`absolute inset-0 ${overlayClass}`} aria-hidden="true" />
|
|
</>
|
|
)}
|
|
<div className="relative max-w-[1200px] mx-auto px-6 md:px-8 flex flex-col items-start gap-6 md:gap-8">
|
|
<h1 className={`w-full max-w-[884px] font-joey-heavy text-fd-display ${headingColor}`}>
|
|
{heading}
|
|
</h1>
|
|
{subheading && (
|
|
<h2 className={`w-full max-w-[884px] font-joey-medium text-fd-h1 ${textBodyColor}`}>
|
|
{subheading}
|
|
</h2>
|
|
)}
|
|
{body && (
|
|
<p className={`w-full max-w-[597px] font-joey text-fd-body-lg ${textBodyColor}`}>
|
|
{body}
|
|
</p>
|
|
)}
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
|
|
{ctaText && (
|
|
<a href={ctaLink || '#'} className="fd-btn-primary">
|
|
{ctaText}
|
|
</a>
|
|
)}
|
|
{secondaryCtaText && (
|
|
<a href={secondaryCtaLink || '#'} className={secondaryBtnClass}>
|
|
{secondaryCtaText}
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|