33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
import { LinkList } from '#web-runtime/components/links';
|
|
import { RichTextContent } from '#web-runtime/components/rich-text';
|
|
import type { BannerBlock as BannerBlockData } from '#web-runtime/types';
|
|
|
|
const styleClasses: Record<BannerBlockData['style'], string> = {
|
|
info: 'border-[#a9bed9] bg-[#eef3fb]',
|
|
success: 'border-[#99d900] bg-[#f0fbd4]',
|
|
warning: 'border-[#e3b341] bg-[#fdf3d8]',
|
|
error: 'border-[#e0604d] bg-[#fdeae5]'
|
|
};
|
|
|
|
export default function BannerBlock({ block }: { block: BannerBlockData }) {
|
|
return (
|
|
<section
|
|
className="border-b border-[#d6d7cf] py-[clamp(2.5rem,5vw,4rem)] 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)]">
|
|
<div
|
|
className={`flex flex-wrap items-center justify-between gap-x-8 gap-y-5 rounded-[1.25rem] border p-[clamp(1.5rem,3vw,2.25rem)] ${styleClasses[block.style]}`}
|
|
data-banner-style={block.style}
|
|
>
|
|
<RichTextContent
|
|
value={block.content}
|
|
className="min-w-64 flex-1 basis-96 text-[#172019]"
|
|
/>
|
|
<LinkList links={block.ctaItems} className="shrink-0" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|