44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
interface PageHeaderProps {
|
|
icon: React.ElementType;
|
|
title: string;
|
|
description?: string;
|
|
action?: React.ReactNode;
|
|
iconGradient?: string;
|
|
iconBorder?: string;
|
|
}
|
|
|
|
/**
|
|
* Page header component with icon, title, description, and optional action.
|
|
* Used at the top of pages for consistent page titling.
|
|
*/
|
|
export default function PageHeader({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
action,
|
|
iconGradient = 'from-iron-gray to-deep-graphite',
|
|
iconBorder = 'border-charcoal-outline',
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<div className="mb-8">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-white flex items-center gap-4">
|
|
<div className={`p-3 rounded-xl bg-gradient-to-br ${iconGradient} border ${iconBorder}`}>
|
|
<Icon className="w-7 h-7 text-gray-300" />
|
|
</div>
|
|
{title}
|
|
</h1>
|
|
{description && (
|
|
<p className="text-gray-400 mt-2 ml-16">{description}</p>
|
|
)}
|
|
</div>
|
|
{action}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |