Files
LogisicsApp_Client/Components/UI/PageHeader.tsx

29 lines
912 B
TypeScript

interface PageHeaderProps {
title: string;
description?: string;
action?: React.ReactNode;
backHref?: string;
backLabel?: string;
}
export function PageHeader({ title, description, action, backHref, backLabel }: PageHeaderProps) {
return (
<div className="mb-6 flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
<div>
{backHref && (
<a
href={backHref}
className="mb-2 inline-flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-800 font-medium"
>
{backLabel ?? "Back"}
</a>
)}
<h1 className="text-2xl font-bold tracking-tight text-slate-900">{title}</h1>
{description && (
<p className="mt-1 text-sm text-slate-500">{description}</p>
)}
</div>
{action && <div className="mt-3 sm:mt-0 shrink-0">{action}</div>}
</div>
);
}