45 lines
1.3 KiB
JavaScript
45 lines
1.3 KiB
JavaScript
import { useAuth } from "../auth/AuthContext";
|
|
|
|
export default function Header() {
|
|
const { user, logout } = useAuth();
|
|
|
|
return (
|
|
<header
|
|
className="px-6 py-3 flex items-center justify-between border-b"
|
|
style={{
|
|
backgroundColor: "var(--bg-header)",
|
|
borderColor: "var(--border-primary)",
|
|
}}
|
|
>
|
|
<h2 className="text-lg font-semibold" style={{ color: "var(--text-heading)" }}>
|
|
BellCloud™ - Console new 41
|
|
</h2>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<span className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
|
{user?.name}
|
|
<span
|
|
className="ml-2 px-2 py-0.5 text-xs rounded-full"
|
|
style={{
|
|
backgroundColor: "var(--badge-blue-bg)",
|
|
color: "var(--badge-blue-text)",
|
|
}}
|
|
>
|
|
{user?.role}
|
|
</span>
|
|
</span>
|
|
<button
|
|
onClick={logout}
|
|
className="text-sm transition-colors"
|
|
style={{ color: "var(--danger)" }}
|
|
onMouseEnter={(e) => (e.target.style.color = "var(--danger-hover)")}
|
|
onMouseLeave={(e) => (e.target.style.color = "var(--danger)")}
|
|
>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
/* my test string */ |