56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
export interface Breadcrumb {
|
|
label: string;
|
|
href?: string;
|
|
}
|
|
|
|
export interface PageHeaderProps {
|
|
title: string;
|
|
breadcrumbs?: Breadcrumb[];
|
|
actions?: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function PageHeader({
|
|
title,
|
|
breadcrumbs,
|
|
actions,
|
|
className = '',
|
|
}: PageHeaderProps): ReactNode {
|
|
return (
|
|
<div className={`flex items-center justify-between mb-6 ${className}`}>
|
|
<div>
|
|
{breadcrumbs && breadcrumbs.length > 0 && (
|
|
<nav
|
|
className="flex items-center space-x-2 text-sm mb-2"
|
|
style={{ color: 'var(--color-muted-foreground, #6b7280)' }}
|
|
aria-label="Breadcrumb"
|
|
>
|
|
{breadcrumbs.map((crumb, index) => (
|
|
<span key={index} className="flex items-center">
|
|
{index > 0 && <span className="mx-2">/</span>}
|
|
{crumb.href ? (
|
|
<a
|
|
href={crumb.href}
|
|
className="hover:opacity-80 transition-opacity"
|
|
style={{ color: 'var(--color-muted-foreground, #6b7280)' }}
|
|
>
|
|
{crumb.label}
|
|
</a>
|
|
) : (
|
|
<span>{crumb.label}</span>
|
|
)}
|
|
</span>
|
|
))}
|
|
</nav>
|
|
)}
|
|
<h1 className="text-2xl font-bold" style={{ color: 'var(--color-foreground, #111827)' }}>
|
|
{title}
|
|
</h1>
|
|
</div>
|
|
{actions && <div className="flex items-center space-x-3">{actions}</div>}
|
|
</div>
|
|
);
|
|
}
|