root
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
interface PageHeaderProps {
|
|
eyebrow?: string;
|
|
title: string;
|
|
subtitle?: string;
|
|
centered?: boolean;
|
|
className?: string;
|
|
children?: ReactNode;
|
|
}
|
|
|
|
export default function PageHeader({
|
|
eyebrow,
|
|
title,
|
|
subtitle,
|
|
centered = false,
|
|
className = '',
|
|
children,
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<div
|
|
className={`mx-auto max-w-7xl px-6 pt-5 pb-6 ${centered ? 'text-center' : ''} ${className}`}
|
|
>
|
|
<div className={`${centered ? 'max-w-3xl mx-auto' : 'max-w-3xl'}`}>
|
|
{eyebrow && (
|
|
<div className="text-[#B38B4D] text-[11px] tracking-[2.5px] mb-2 font-medium uppercase">
|
|
{eyebrow}
|
|
</div>
|
|
)}
|
|
<h1 className="text-2xl sm:text-[1.75rem] md:text-3xl tracking-[-0.8px] leading-[1.15] mb-2 text-[#101724] break-words">
|
|
{title}
|
|
</h1>
|
|
{subtitle && (
|
|
<p
|
|
className={`text-sm md:text-[15px] text-[#4b5563] leading-relaxed ${
|
|
centered ? 'mx-auto max-w-xl' : 'max-w-2xl'
|
|
}`}
|
|
>
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |