61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { Eyebrow } from './eyebrow';
|
|
|
|
export interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
eyebrow?: React.ReactNode;
|
|
title: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
align?: 'left' | 'center';
|
|
actions?: React.ReactNode;
|
|
}
|
|
|
|
const SectionHeader = React.forwardRef<HTMLDivElement, SectionHeaderProps>(
|
|
(
|
|
{
|
|
className,
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
align = 'center',
|
|
actions,
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
'flex flex-col gap-4 max-w-3xl mb-12 sm:mb-16',
|
|
align === 'center' && 'mx-auto text-center items-center',
|
|
align === 'left' && 'items-start text-left',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{eyebrow && (
|
|
typeof eyebrow === 'string' ? (
|
|
<Eyebrow>{eyebrow}</Eyebrow>
|
|
) : (
|
|
eyebrow
|
|
)
|
|
)}
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-foreground leading-[1.15]">
|
|
{title}
|
|
</h2>
|
|
{description && (
|
|
<p className="text-base sm:text-lg text-muted-foreground leading-relaxed max-w-2xl">
|
|
{description}
|
|
</p>
|
|
)}
|
|
{actions && <div className="mt-2 flex flex-wrap gap-4 items-center">{actions}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
SectionHeader.displayName = 'SectionHeader';
|
|
|
|
export { SectionHeader };
|