86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import { HeaderNavigation } from "@/components/header/navigation";
|
|
import { LoginButton } from "@/components/login-button";
|
|
import { LogoutButton } from "@/components/logout-button";
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { validateRequest } from "@/server/auth";
|
|
import { UserRole, hasRole } from "@/server/auth/permissions";
|
|
import { StickerIcon, UserIcon, WrenchIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { If, Then } from "react-if";
|
|
|
|
function getInitials(name: string | undefined) {
|
|
if (!name) return "";
|
|
|
|
const parts = name.split(" ");
|
|
if (parts.length === 1) return parts[0].slice(0, 2);
|
|
|
|
return parts[0].charAt(0) + parts[parts.length - 1].charAt(0);
|
|
}
|
|
|
|
export async function Header() {
|
|
const { user } = await validateRequest();
|
|
|
|
return (
|
|
<header className="h-16 bg-neutral-900 border-b-4 border-neutral-600 text-white select-none shadow-md">
|
|
<div className="px-8 h-full max-w-screen-2xl w-full mx-auto flex items-center justify-between">
|
|
<div className="flex flex-row items-center gap-8">
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<StickerIcon size={20} />
|
|
<h1 className="text-lg font-mono">MYP</h1>
|
|
</Link>
|
|
<HeaderNavigation />
|
|
</div>
|
|
|
|
{user != null && (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger>
|
|
<Avatar>
|
|
<AvatarFallback className="bg-neutral-700">
|
|
<span className="font-semibold">{getInitials(user?.displayName)}</span>
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-56">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Mein Account</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/my/profile/" className="flex items-center gap-2">
|
|
<UserIcon className="w-4 h-4" />
|
|
<span>Mein Profil</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
|
|
<If condition={hasRole(user, UserRole.ADMIN)}>
|
|
<Then>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/admin/" className="flex items-center gap-2">
|
|
<WrenchIcon className="w-4 h-4" />
|
|
<span>Adminbereich</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</Then>
|
|
</If>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<LogoutButton />
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
{user == null && <LoginButton />}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|