86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import { useAuth } from "../auth-context";
|
||
|
|
import { sharedStyles } from "../styles/shared";
|
||
|
|
|
||
|
|
type PageId = "counter" | "sum" | "profile" | "audit";
|
||
|
|
|
||
|
|
interface HeaderProps {
|
||
|
|
currentPage: PageId;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface NavItem {
|
||
|
|
id: PageId;
|
||
|
|
label: string;
|
||
|
|
href: string;
|
||
|
|
regularOnly?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const NAV_ITEMS: NavItem[] = [
|
||
|
|
{ id: "counter", label: "Counter", href: "/" },
|
||
|
|
{ id: "sum", label: "Sum", href: "/sum" },
|
||
|
|
{ id: "profile", label: "My Profile", href: "/profile", regularOnly: true },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function Header({ currentPage }: HeaderProps) {
|
||
|
|
const { user, logout, hasRole } = useAuth();
|
||
|
|
const router = useRouter();
|
||
|
|
const isRegularUser = hasRole("regular");
|
||
|
|
|
||
|
|
const handleLogout = async () => {
|
||
|
|
await logout();
|
||
|
|
router.push("/login");
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!user) return null;
|
||
|
|
|
||
|
|
// For audit page (admin), show only the current page label
|
||
|
|
if (currentPage === "audit") {
|
||
|
|
return (
|
||
|
|
<div style={sharedStyles.header}>
|
||
|
|
<div style={sharedStyles.nav}>
|
||
|
|
<span style={sharedStyles.navCurrent}>Audit</span>
|
||
|
|
</div>
|
||
|
|
<div style={sharedStyles.userInfo}>
|
||
|
|
<span style={sharedStyles.userEmail}>{user.email}</span>
|
||
|
|
<button onClick={handleLogout} style={sharedStyles.logoutBtn}>
|
||
|
|
Sign out
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// For regular pages, build nav with links
|
||
|
|
const visibleItems = NAV_ITEMS.filter(
|
||
|
|
(item) => !item.regularOnly || isRegularUser
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={sharedStyles.header}>
|
||
|
|
<div style={sharedStyles.nav}>
|
||
|
|
{visibleItems.map((item, index) => (
|
||
|
|
<span key={item.id}>
|
||
|
|
{index > 0 && <span style={sharedStyles.navDivider}>•</span>}
|
||
|
|
{item.id === currentPage ? (
|
||
|
|
<span style={sharedStyles.navCurrent}>{item.label}</span>
|
||
|
|
) : (
|
||
|
|
<a href={item.href} style={sharedStyles.navLink}>
|
||
|
|
{item.label}
|
||
|
|
</a>
|
||
|
|
)}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div style={sharedStyles.userInfo}>
|
||
|
|
<span style={sharedStyles.userEmail}>{user.email}</span>
|
||
|
|
<button onClick={handleLogout} style={sharedStyles.logoutBtn}>
|
||
|
|
Sign out
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|