79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import React from 'react'
|
|
import type { FDHeaderTextImageBlock as FDHeaderTextImageBlockProps, Media } from '@/payload-types'
|
|
import { FDImage } from '@/components/FDImage'
|
|
|
|
const bgMap: Record<string, string> = {
|
|
white: 'bg-white',
|
|
gray: 'bg-fd-gray-light',
|
|
navy: 'bg-fd-navy',
|
|
}
|
|
|
|
const textMap: Record<string, string> = {
|
|
navy: 'text-fd-navy',
|
|
white: 'text-white',
|
|
}
|
|
|
|
const overlayMap: Record<string, string> = {
|
|
none: '',
|
|
navyLight: 'bg-fd-navy/20',
|
|
navyMedium: 'bg-fd-navy/40',
|
|
yellowLight: 'bg-fd-yellow/20',
|
|
yellowMedium: 'bg-fd-yellow/40',
|
|
sepia: 'bg-[#8B7D3C]/30',
|
|
blackLight: 'bg-black/20',
|
|
blackMedium: 'bg-black/40',
|
|
}
|
|
|
|
const roundedMap: Record<string, string> = {
|
|
none: '',
|
|
medium: 'rounded-[24px]',
|
|
large: 'rounded-[40px]',
|
|
}
|
|
|
|
export const FDHeaderTextImageBlockComponent: React.FC<FDHeaderTextImageBlockProps> = ({
|
|
heading,
|
|
body,
|
|
image,
|
|
imageOverlay = 'none',
|
|
imageRounded = 'large',
|
|
textAlign = 'center',
|
|
background = 'white',
|
|
textColor = 'navy',
|
|
}) => {
|
|
const bg = bgMap[background || 'white']
|
|
const txt = textMap[textColor || 'navy']
|
|
const overlay = overlayMap[imageOverlay || 'none']
|
|
const rounded = roundedMap[imageRounded || 'large']
|
|
const align = textAlign === 'center' ? 'text-center' : 'text-left'
|
|
const media = image as Media
|
|
|
|
return (
|
|
<section className={`w-full py-12 md:py-16 lg:py-20 ${bg}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8 flex flex-col gap-8 md:gap-10">
|
|
{(heading || body) && (
|
|
<div className={`flex flex-col gap-4 md:gap-6 ${align} ${textAlign === 'center' ? 'max-w-[900px] mx-auto' : ''}`}>
|
|
{heading && (
|
|
<h2 className={`font-joey-heavy text-fd-h1 ${txt}`}>{heading}</h2>
|
|
)}
|
|
{body && (
|
|
<p className={`font-joey text-fd-body ${txt} opacity-80`}>{body}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
{media?.url && (
|
|
<div className={`relative w-full overflow-hidden ${rounded}`}>
|
|
<FDImage
|
|
media={media}
|
|
size="hero"
|
|
className="w-full h-auto object-cover"
|
|
sizes="(max-width: 1200px) 100vw, 1200px"
|
|
fallbackAlt={heading || ''}
|
|
/>
|
|
{overlay && <div className={`absolute inset-0 ${overlay}`} />}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|