77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import './blocks.css';
|
|
|
|
export interface CTABlockProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
primaryCtaLabel?: string;
|
|
primaryCtaLink?: string;
|
|
onPrimaryCtaClick?: () => void;
|
|
secondaryCtaLabel?: string;
|
|
secondaryCtaLink?: string;
|
|
onSecondaryCtaClick?: () => void;
|
|
backgroundImage?: string;
|
|
variant?: 'default' | 'centered' | 'split';
|
|
children?: ReactNode;
|
|
}
|
|
|
|
export function CTABlock({
|
|
title,
|
|
subtitle,
|
|
primaryCtaLabel,
|
|
primaryCtaLink,
|
|
onPrimaryCtaClick,
|
|
secondaryCtaLabel,
|
|
secondaryCtaLink,
|
|
onSecondaryCtaClick,
|
|
backgroundImage,
|
|
variant = 'default',
|
|
children
|
|
}: CTABlockProps) {
|
|
return (
|
|
<section
|
|
className={`shared-cta shared-cta--${variant}`}
|
|
style={backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : undefined}
|
|
>
|
|
<div className="shared-cta__content">
|
|
<h2 className="shared-cta__title">{title}</h2>
|
|
{subtitle && <p className="shared-cta__subtitle">{subtitle}</p>}
|
|
{children && <div className="shared-cta__children">{children}</div>}
|
|
<div className="shared-cta__actions">
|
|
{primaryCtaLabel && (
|
|
primaryCtaLink ? (
|
|
<a href={primaryCtaLink} className="shared-button shared-button--primary">
|
|
{primaryCtaLabel}
|
|
</a>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="shared-button shared-button--primary"
|
|
onClick={onPrimaryCtaClick}
|
|
>
|
|
{primaryCtaLabel}
|
|
</button>
|
|
)
|
|
)}
|
|
{secondaryCtaLabel && (
|
|
secondaryCtaLink ? (
|
|
<a href={secondaryCtaLink} className="shared-button shared-button--secondary">
|
|
{secondaryCtaLabel}
|
|
</a>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="shared-button shared-button--secondary"
|
|
onClick={onSecondaryCtaClick}
|
|
>
|
|
{secondaryCtaLabel}
|
|
</button>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|