48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
import { LinkList } from '#web-runtime/components/links';
|
|
import { RichTextContent } from '#web-runtime/components/rich-text';
|
|
import type { ContentBlock as ContentBlockData } from '#web-runtime/types';
|
|
|
|
export default function ContentBlock({ block }: { block: ContentBlockData }) {
|
|
const columnClasses = {
|
|
1: 'grid-cols-1',
|
|
2: 'grid-cols-2 max-[45rem]:grid-cols-1',
|
|
3: 'grid-cols-3 max-lg:grid-cols-1'
|
|
}[Math.min(block.columns.length, 3) as 1 | 2 | 3];
|
|
|
|
return (
|
|
<section
|
|
className="border-b border-[#d6d7cf] py-[clamp(4.5rem,9vw,8rem)] nth-of-type-[even]:bg-[#fffdf8]"
|
|
data-page-block={block.type}
|
|
>
|
|
<div className="mx-auto w-[min(calc(100%-2rem),76rem)] max-[45rem]:w-[min(calc(100%-1.25rem),76rem)]">
|
|
{block.title || block.subtitle ? (
|
|
<header className="mb-[clamp(2rem,5vw,4rem)] max-w-3xl">
|
|
{block.title ? (
|
|
<h2 className="text-[clamp(2rem,4vw,3.8rem)] leading-[1.04] font-semibold tracking-[-0.055em]">
|
|
{block.title}
|
|
</h2>
|
|
) : null}
|
|
{block.subtitle ? (
|
|
<p className="mt-4 max-w-160 text-lg leading-[1.6] text-[#5d675f]">
|
|
{block.subtitle}
|
|
</p>
|
|
) : null}
|
|
</header>
|
|
) : null}
|
|
|
|
<div className={`grid gap-4 ${columnClasses}`}>
|
|
{block.columns.map((column, index) => (
|
|
<article
|
|
className="flex min-w-0 flex-col items-start gap-6 rounded-[1.25rem] border border-[#d6d7cf] bg-white/50 p-[clamp(1.5rem,3vw,2.25rem)] [&>div:last-child]:mt-auto"
|
|
key={`${block.id}-column-${index}`}
|
|
>
|
|
<RichTextContent value={column.content} />
|
|
<LinkList links={column.ctaItems} />
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|