90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
import React from 'react'
|
|
import type { FDIconBarBlock as FDIconBarBlockProps, Media } from '@/payload-types'
|
|
import { FDImage } from '@/components/FDImage'
|
|
|
|
const bgMap: Record<string, string> = {
|
|
white: 'bg-white dark:bg-fd-navy',
|
|
gray: 'bg-fd-gray-light dark:bg-fd-navy',
|
|
navy: 'bg-fd-navy',
|
|
yellow: 'bg-fd-yellow',
|
|
}
|
|
|
|
const headingMap: Record<string, string> = {
|
|
navy: 'text-fd-navy dark:text-fd-yellow',
|
|
white: 'text-white',
|
|
}
|
|
|
|
const labelMap: Record<string, string> = {
|
|
navy: 'text-fd-navy dark:text-white',
|
|
white: 'text-white',
|
|
}
|
|
|
|
// Icon circle bg — navy circles become yellow-tinted in dark when on a now-navy section
|
|
const iconBgMap: Record<string, string> = {
|
|
navy: 'bg-fd-navy dark:bg-white/10',
|
|
yellow: 'bg-fd-yellow',
|
|
gray: 'bg-fd-gray-light dark:bg-white/10',
|
|
none: '',
|
|
}
|
|
|
|
export const FDIconBarBlockComponent: React.FC<FDIconBarBlockProps> = ({
|
|
heading,
|
|
icons,
|
|
iconStyle = 'navy',
|
|
sectionBackground = 'gray',
|
|
textColor = 'navy',
|
|
}) => {
|
|
const bg = bgMap[sectionBackground || 'gray']
|
|
const headClr = headingMap[textColor || 'navy']
|
|
const labelClr = labelMap[textColor || 'navy']
|
|
const iconBg = iconBgMap[iconStyle || 'navy']
|
|
const hasCircle = iconStyle !== 'none'
|
|
|
|
return (
|
|
<section className={`w-full py-16 md:py-20 lg:py-[99px] ${bg}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8">
|
|
{heading && (
|
|
<h2 className={`font-joey-heavy text-fd-h1 mb-10 md:mb-14 ${headClr}`}>
|
|
{heading}
|
|
</h2>
|
|
)}
|
|
<div className="flex flex-wrap justify-center gap-8 md:gap-10 lg:gap-12">
|
|
{icons?.map((item, index) => {
|
|
const media = item.icon as Media
|
|
const content = (
|
|
<div className="flex flex-col items-center gap-3 md:gap-4">
|
|
<div
|
|
className={`w-20 h-20 md:w-24 md:h-24 lg:w-28 lg:h-28 flex items-center justify-center ${
|
|
hasCircle ? `${iconBg} rounded-full` : ''
|
|
}`}
|
|
>
|
|
{media?.url && (
|
|
<FDImage
|
|
media={media}
|
|
size="thumbnail"
|
|
className="w-10 h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 object-contain"
|
|
sizes="56px"
|
|
fallbackAlt={item.label}
|
|
/>
|
|
)}
|
|
</div>
|
|
<span className={`font-joey-bold text-fd-body text-center ${labelClr}`}>
|
|
{item.label}
|
|
</span>
|
|
</div>
|
|
)
|
|
if (item.link) {
|
|
return (
|
|
<a key={index} href={item.link} className="hover:opacity-80 transition-opacity">
|
|
{content}
|
|
</a>
|
|
)
|
|
}
|
|
return <div key={index}>{content}</div>
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|