blob: 058c18c0b8e9738c82ead498aac77a1443bb3b2b (
plain)
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
49
50
51
52
53
54
55
56
|
import { ArrowLeft, Menu } from "lucide-react";
import { Link } from "react-router";
import { usePageTitleContext } from "~/contexts/PageTitleContext";
import "./Header.css";
interface HeaderProps {
title?: string;
onMenuClick?: () => void;
className?: string;
}
export const Header: React.FC<HeaderProps> = ({
title = "Enmarcha",
onMenuClick,
className = "",
}) => {
const { onBack, backTo, titleNode, rightNode } = usePageTitleContext();
return (
<header className={`app-header ${className}`}>
<div className="app-header__left">
{backTo && (
<Link
className="app-header__menu-btn"
to={backTo}
aria-label="Atrás"
style={{ marginRight: "8px" }}
>
<ArrowLeft size={24} />
</Link>
)}
{!backTo && onBack && (
<button
className="app-header__menu-btn"
onClick={onBack}
aria-label="Atrás"
style={{ marginRight: "8px" }}
>
<ArrowLeft size={24} />
</button>
)}
{titleNode ? titleNode : <h1 className="app-header__title">{title}</h1>}
</div>
<div className="app-header__right flex items-center gap-2">
{rightNode}
<button
className="app-header__menu-btn"
onClick={onMenuClick}
aria-label="Menu"
>
<Menu size={24} />
</button>
</div>
</header>
);
};
|
