64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import Link from "next/link";
|
|
import React from "react";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import Avatar from "@/components/avatar";
|
|
import { Edit, Eye, LogOut } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import type { Player } from "@/server/db/schema";
|
|
import { appRoutes } from "@/config/app.routes";
|
|
|
|
function UserPopover({ player }: { player: Player }) {
|
|
const dropdownItemClassName = " flex items-center gap-1 ";
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger>
|
|
<Avatar
|
|
src={player.avatar!}
|
|
fb={player.displayName!}
|
|
className="border-border/20 size-10 cursor-pointer border-2"
|
|
/>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuLabel className="w-32 truncate overflow-hidden font-bold">
|
|
{player.displayName}
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem className={dropdownItemClassName} asChild>
|
|
<Link href={appRoutes.me}>
|
|
<Eye className="size-4 text-white" />
|
|
View Profile
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className={dropdownItemClassName} asChild>
|
|
<Link href={appRoutes.editProfile}>
|
|
<Edit className="size-4 text-white" />
|
|
Edit Profile
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
className={cn(
|
|
dropdownItemClassName,
|
|
"group focus:border-destructive focus:text-destructive border border-transparent focus:font-bold",
|
|
)}
|
|
asChild
|
|
>
|
|
<Link href={appRoutes.signOut}>
|
|
<LogOut className="group-focus:text-destructive size-4 text-white" />
|
|
Log out
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|
|
|
|
export default UserPopover;
|