78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import Eyebrow from '@/components/site/eyebrow';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type SectionHeaderProps = {
|
|
eyebrow?: ReactNode;
|
|
eyebrowIcon?: string;
|
|
title: ReactNode;
|
|
description?: ReactNode;
|
|
/**
|
|
* `left`: stacked, `center`: centered, `split`: title on the left and the
|
|
* description (or `aside`) aligned to the bottom right.
|
|
*/
|
|
align?: 'left' | 'center' | 'split';
|
|
aside?: ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export default function SectionHeader({
|
|
eyebrow,
|
|
eyebrowIcon,
|
|
title,
|
|
description,
|
|
align = 'left',
|
|
aside,
|
|
className,
|
|
}: SectionHeaderProps) {
|
|
const heading = (
|
|
<div
|
|
className={cn(
|
|
'flex flex-col gap-3',
|
|
align === 'center' && 'items-center text-center',
|
|
align === 'split' ? 'max-w-2xl' : 'max-w-3xl',
|
|
)}
|
|
>
|
|
{eyebrow && <Eyebrow icon={eyebrowIcon}>{eyebrow}</Eyebrow>}
|
|
<h2 className="font-display text-on-surface lg:text-headline-xl text-3xl font-extrabold tracking-tight">
|
|
{title}
|
|
</h2>
|
|
{description && align !== 'split' && (
|
|
<p className="text-on-surface-variant text-base leading-relaxed">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
if (align === 'split') {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex flex-col justify-between gap-6 md:flex-row md:items-end',
|
|
className,
|
|
)}
|
|
>
|
|
{heading}
|
|
{aside ??
|
|
(description && (
|
|
<p className="text-on-surface-variant max-w-md text-sm leading-relaxed">
|
|
{description}
|
|
</p>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
align === 'center' && 'mx-auto flex justify-center',
|
|
className,
|
|
)}
|
|
>
|
|
{heading}
|
|
</div>
|
|
);
|
|
}
|