47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import type { FDContactBlock as FDContactBlockProps, Media } from '@/payload-types'
|
|
import { FDImage } from '@/components/FDImage'
|
|
|
|
export const FDContactBlockComponent: React.FC<FDContactBlockProps> = ({
|
|
heading,
|
|
contactMethods,
|
|
}) => {
|
|
return (
|
|
<section className="relative w-full bg-fd-navy py-16 md:py-20 lg:pt-[100px] lg:pb-[120px]">
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8 flex flex-col items-center gap-8 lg:gap-10">
|
|
<h2 className="w-full font-joey-heavy text-fd-navy text-fd-h1 text-fd-yellow text-center">
|
|
{heading}
|
|
</h2>
|
|
<div className="flex flex-row items-stretch gap-4 md:gap-7 w-full max-w-[656px]">
|
|
{contactMethods?.map((method, index) => {
|
|
const media = method.icon as Media
|
|
const card = (
|
|
<div className="flex-1 flex flex-col items-center gap-3 md:gap-5 cursor-pointer transition-transform hover:scale-105">
|
|
{media?.url && (
|
|
<div className="relative w-full h-[120px] md:h-[160px] lg:h-[200px] overflow-hidden rounded-[70px]">
|
|
<FDImage
|
|
media={media}
|
|
size="medium"
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 50vw, 300px"
|
|
fallbackAlt={method.label}
|
|
/>
|
|
</div>
|
|
)}
|
|
<p className="w-full font-joey-bold text-white text-fd-h2 text-center">
|
|
{method.label}
|
|
</p>
|
|
</div>
|
|
)
|
|
if (method.link) {
|
|
return <a key={index} href={method.link} className="flex-1">{card}</a>
|
|
}
|
|
return <div key={index} className="flex-1">{card}</div>
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|