52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
import { ChevronRight } from "lucide-react";
|
|
import { Outfit } from "next/font/google";
|
|
|
|
const outfit = Outfit({ subsets: ["latin"], weight: ["500", "700", "800"] });
|
|
|
|
export interface PageHeaderProps {
|
|
title: React.ReactNode;
|
|
subtitle?: string;
|
|
breadcrumbs?: { label: string; href: string }[];
|
|
}
|
|
|
|
export function PageHeader({ title, subtitle, breadcrumbs }: PageHeaderProps) {
|
|
return (
|
|
<div className="w-full bg-slate-50 border-b border-border pt-24 pb-16 lg:pt-32 lg:pb-24">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
{/* Breadcrumbs */}
|
|
{breadcrumbs && breadcrumbs.length > 0 && (
|
|
<nav className="flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-text-muted mb-8">
|
|
<Link href="/" className="hover:text-primary transition-colors">Główna</Link>
|
|
{breadcrumbs.map((crumb, index) => (
|
|
<div key={crumb.href} className="flex items-center gap-2">
|
|
<ChevronRight className="size-3" />
|
|
{index === breadcrumbs.length - 1 ? (
|
|
<span className="text-primary">{crumb.label}</span>
|
|
) : (
|
|
<Link href={crumb.href} className="hover:text-primary transition-colors">
|
|
{crumb.label}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
)}
|
|
|
|
<div className="max-w-3xl">
|
|
<h1 className={`${outfit.className} text-4xl sm:text-5xl lg:text-6xl font-extrabold text-primary uppercase tracking-tight leading-[1.05]`}>
|
|
{title}
|
|
</h1>
|
|
{subtitle && (
|
|
<p className="mt-6 text-lg text-text-muted max-w-2xl leading-relaxed border-l-[3px] border-accent pl-4">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|