File size: 1,280 Bytes
24d40b9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import { ReactNode } from 'react';
import { ArrowLeft } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { cn } from '@/lib/utils';
interface HeaderProps {
title: string;
subtitle?: string;
showBackButton?: boolean;
rightElement?: ReactNode;
className?: string;
}
const Header = ({
title,
subtitle,
showBackButton = false,
rightElement,
className
}: HeaderProps) => {
const navigate = useNavigate();
return (
<header className={cn("px-4 py-6", className)}>
<div className="flex items-center justify-between">
<div className="flex items-center">
{showBackButton && (
<button
onClick={() => navigate(-1)}
className="mr-3 p-1.5 rounded-full bg-secondary hover:bg-secondary/80 transition-colors"
>
<ArrowLeft size={18} />
</button>
)}
<div>
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
{subtitle && <p className="text-sm text-muted-foreground mt-0.5">{subtitle}</p>}
</div>
</div>
{rightElement && <div>{rightElement}</div>}
</div>
</header>
);
};
export default Header;
|