97 lines
4.0 KiB
TypeScript
97 lines
4.0 KiB
TypeScript
import React from 'react'
|
|
import type { FDPricingCardBlock as FDPricingCardBlockProps } from '@/payload-types'
|
|
|
|
const sectionBgMap: Record<string, string> = {
|
|
white: 'bg-white',
|
|
navy: 'bg-fd-navy',
|
|
gray: 'bg-fd-gray-light',
|
|
yellow: 'bg-fd-yellow',
|
|
}
|
|
|
|
const titleColorMap: Record<string, string> = {
|
|
navy: 'text-fd-navy',
|
|
white: 'text-white',
|
|
yellow: 'text-fd-yellow',
|
|
}
|
|
|
|
const cardStyleMap: Record<string, { bg: string; border: string; title: string; subtitle: string; body: string; bullet: string }> = {
|
|
outlined: { bg: 'bg-white', border: 'border-[6px] border-[#d1d5db]', title: 'text-fd-navy', subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy' },
|
|
navy: { bg: 'bg-fd-navy', border: '', title: 'text-fd-yellow', subtitle: 'text-white', body: 'text-white/80', bullet: 'text-white' },
|
|
gray: { bg: 'bg-[#e5e5e5]', border: '', title: 'text-fd-navy', subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy' },
|
|
yellow: { bg: 'bg-fd-yellow', border: '', title: 'text-fd-navy', subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy' },
|
|
white: { bg: 'bg-white shadow-lg', border: '', title: 'text-fd-navy', subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy' },
|
|
}
|
|
|
|
// Map to fd-btn classes; the 'a' tag just uses the class directly
|
|
const buttonStyleMap: Record<string, string> = {
|
|
yellow: 'fd-btn-primary',
|
|
navy: 'fd-btn-navy',
|
|
outlinedNavy: 'fd-btn-secondary',
|
|
outlinedWhite: 'fd-btn-secondary-dark',
|
|
}
|
|
|
|
const gridColsMap: Record<number, string> = {
|
|
1: 'lg:grid-cols-1 max-w-[500px] mx-auto',
|
|
2: 'lg:grid-cols-2',
|
|
3: 'lg:grid-cols-3',
|
|
}
|
|
|
|
export const FDPricingCardBlockComponent: React.FC<FDPricingCardBlockProps> = ({
|
|
sectionTitle,
|
|
cards,
|
|
cardStyle = 'outlined',
|
|
buttonColor = 'yellow',
|
|
sectionBackground = 'white',
|
|
titleColor = 'navy',
|
|
}) => {
|
|
const sectionBg = sectionBgMap[sectionBackground || 'white']
|
|
const sectionTitleColor = titleColorMap[titleColor || 'navy']
|
|
const style = cardStyleMap[cardStyle || 'outlined']
|
|
const btnClass = buttonStyleMap[buttonColor || 'yellow'] || 'fd-btn-primary'
|
|
const cardCount = cards?.length || 1
|
|
const gridCols = gridColsMap[cardCount] || gridColsMap[3]
|
|
|
|
return (
|
|
<section className={`w-full py-12 md:py-16 lg:py-20 ${sectionBg}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8">
|
|
{sectionTitle && (
|
|
<h2 className={`font-joey-heavy text-fd-h1 text-center mb-10 md:mb-14 ${sectionTitleColor}`}>
|
|
{sectionTitle}
|
|
</h2>
|
|
)}
|
|
<div className={`grid grid-cols-1 ${gridCols} gap-6 md:gap-8`}>
|
|
{cards?.map((card, index) => (
|
|
<div
|
|
key={index}
|
|
className={`${style.bg} ${style.border} rounded-[32px] md:rounded-[50px] lg:rounded-[70px] px-8 md:px-10 py-10 md:py-12 flex flex-col gap-5`}
|
|
>
|
|
<h3 className={`font-joey-heavy text-fd-h2 ${style.title}`}>{card.title}</h3>
|
|
{card.subtitle && (
|
|
<p className={`font-joey-bold text-fd-h3 ${style.subtitle}`}>{card.subtitle}</p>
|
|
)}
|
|
{card.description && (
|
|
<p className={`font-joey text-fd-body ${style.body}`}>{card.description}</p>
|
|
)}
|
|
{card.bulletPoints && card.bulletPoints.length > 0 && (
|
|
<ul className={`flex flex-col gap-1 ${style.bullet}`}>
|
|
{card.bulletPoints.map((point, i) => (
|
|
<li key={i} className="flex items-start gap-3">
|
|
<span className="mt-2 w-2 h-2 rounded-full bg-current flex-shrink-0" />
|
|
<span className="font-joey text-fd-body">{point.text}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{card.ctaText && (
|
|
<div className="mt-auto pt-4">
|
|
<a href={card.ctaLink || '#'} className={btnClass}>{card.ctaText}</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|