82 lines
3.2 KiB
TypeScript
82 lines
3.2 KiB
TypeScript
import React from 'react'
|
|
import type { FDWideCardBlock as FDWideCardBlockProps, Media } from '@/payload-types'
|
|
import { FDButton } from '@/components/FDButton'
|
|
import { FDImage } from '@/components/FDImage'
|
|
|
|
const cardBgMap: Record<string, { bg: string; heading: string; body: string; isDark: boolean }> = {
|
|
navy: { bg: 'bg-fd-navy', heading: 'text-white', body: 'text-white/80', isDark: true },
|
|
yellow: { bg: 'bg-fd-yellow', heading: 'text-fd-navy', body: 'text-fd-navy/80', isDark: false },
|
|
gray: { bg: 'bg-fd-gray-light dark:bg-white/10', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false },
|
|
white: { bg: 'bg-white dark:bg-white/10 shadow-fd-card dark:shadow-none', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false },
|
|
}
|
|
|
|
const sectionBgMap: Record<string, string> = {
|
|
white: 'bg-white dark:bg-fd-navy',
|
|
gray: 'bg-fd-gray-light dark:bg-fd-navy',
|
|
navy: 'bg-fd-navy',
|
|
}
|
|
|
|
const btnVariantMap: Record<string, { variant: 'primary' | 'outline' }> = {
|
|
yellow: { variant: 'primary' },
|
|
navy: { variant: 'outline' },
|
|
white: { variant: 'primary' },
|
|
}
|
|
|
|
const cardRadius = 'rounded-[32px] md:rounded-[50px] lg:rounded-[70px]'
|
|
|
|
export const FDWideCardBlockComponent: React.FC<FDWideCardBlockProps> = ({
|
|
heading,
|
|
body,
|
|
ctaText,
|
|
ctaLink,
|
|
image,
|
|
cardBackground = 'navy',
|
|
buttonColor = 'yellow',
|
|
sectionBackground = 'white',
|
|
anchorId,
|
|
}) => {
|
|
const card = cardBgMap[cardBackground || 'navy']
|
|
const sectionBg = sectionBgMap[sectionBackground || 'white']
|
|
const { variant } = btnVariantMap[buttonColor || 'yellow']
|
|
const media = image as Media | undefined
|
|
const hasImage = media && typeof media === 'object' && media.url
|
|
|
|
return (
|
|
<section id={anchorId || undefined} className={`w-full py-16 md:py-20 lg:py-[99px] ${sectionBg}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8">
|
|
<div className={`${card.bg} ${cardRadius} flex flex-col min-[820px]:flex-row`}>
|
|
<div className="flex-1 flex flex-col justify-center gap-5 md:gap-6 px-8 md:px-14 lg:px-16 py-12 md:py-16">
|
|
<h2 className={`font-joey-heavy text-fd-h1 leading-tight ${card.heading}`}>
|
|
{heading}
|
|
</h2>
|
|
{body && (
|
|
<p className={`font-joey text-fd-body-lg leading-relaxed ${card.body}`}>
|
|
{body}
|
|
</p>
|
|
)}
|
|
{ctaText && (
|
|
<div>
|
|
<FDButton href={ctaLink || '#'} variant={variant} onDark={card.isDark} className="w-full sm:w-auto justify-center">
|
|
{ctaText}
|
|
</FDButton>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{hasImage && (
|
|
<div className="flex items-center justify-center w-full min-[820px]:w-[45%] lg:w-[480px] flex-shrink-0 p-6 md:p-10 lg:p-12">
|
|
<FDImage
|
|
media={media}
|
|
size="large"
|
|
className="w-full h-auto max-h-[320px] object-contain drop-shadow-xl"
|
|
sizes="(max-width: 820px) 80vw, 400px"
|
|
fallbackAlt={heading || ''}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|