69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
import type { FDTextBlock as FDTextBlockProps } from '@/payload-types'
|
|
import RichText from '@/components/RichText'
|
|
|
|
const bgMap: Record<string, string> = {
|
|
white: 'bg-white',
|
|
navy: 'bg-fd-navy',
|
|
gray: 'bg-fd-gray-light',
|
|
yellow: 'bg-fd-yellow',
|
|
}
|
|
|
|
const alignMap: Record<string, string> = {
|
|
left: 'text-left',
|
|
center: 'text-center',
|
|
right: 'text-right',
|
|
}
|
|
|
|
const maxWidthMap: Record<string, string> = {
|
|
narrow: 'max-w-[600px]',
|
|
medium: 'max-w-[800px]',
|
|
wide: 'max-w-[1100px]',
|
|
full: '',
|
|
}
|
|
|
|
const textColorMap: Record<string, { h1: string; h2: string; body: string }> = {
|
|
navy: { h1: 'text-fd-navy', h2: 'text-fd-navy', body: 'text-fd-navy' },
|
|
white: { h1: 'text-white', h2: 'text-white', body: 'text-white/90' },
|
|
yellow: { h1: 'text-fd-yellow', h2: 'text-fd-yellow', body: 'text-fd-yellow/90' },
|
|
}
|
|
|
|
export const FDTextBlockComponent: React.FC<FDTextBlockProps> = ({
|
|
heading,
|
|
subheading,
|
|
body,
|
|
alignment = 'left',
|
|
textColor = 'navy',
|
|
sectionBackground = 'white',
|
|
maxWidth = 'wide',
|
|
}) => {
|
|
const bg = bgMap[sectionBackground || 'white']
|
|
const align = alignMap[alignment || 'left']
|
|
const width = maxWidthMap[maxWidth || 'wide']
|
|
const colors = textColorMap[textColor || 'navy']
|
|
const containerAlign =
|
|
alignment === 'center' ? 'mx-auto' : alignment === 'right' ? 'ml-auto' : ''
|
|
|
|
if (!heading && !subheading && !body) return null
|
|
|
|
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">
|
|
<div className={`${width} ${containerAlign} ${align} flex flex-col gap-4 md:gap-6`}>
|
|
{heading && (
|
|
<h1 className={`font-joey-heavy text-fd-display ${colors.h1}`}>{heading}</h1>
|
|
)}
|
|
{subheading && (
|
|
<h2 className={`font-joey-medium text-fd-h1 ${colors.h2}`}>{subheading}</h2>
|
|
)}
|
|
{body && (
|
|
<div className={`font-joey text-fd-body-lg fd-prose ${colors.body}`}>
|
|
<RichText data={body} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|