70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuShortcut,
|
|
DropdownMenuTrigger
|
|
} from "@/components/ui/dropdown-menu";
|
|
import useAuth from "@/hooks/useAuth";
|
|
|
|
export function ProfileDropdown() {
|
|
const { user, logout } = useAuth();
|
|
if (!user) return "";
|
|
|
|
let shorthandUsername = "";
|
|
if (user.first_name && user.last_name) {
|
|
shorthandUsername = (user.first_name[0] + user.last_name[0]).toUpperCase();
|
|
} else {
|
|
shorthandUsername = user.username[0].toUpperCase();
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu modal={false}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src="/avatars/01.png" alt="@shadcn" />
|
|
<AvatarFallback>{shorthandUsername}</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56" align="end" forceMount>
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm font-medium leading-none">{user.username}</p>
|
|
<p className="text-xs leading-none text-muted-foreground">
|
|
{user.email}
|
|
</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem asChild>
|
|
<Link to="/dashboard/settings">
|
|
Profile
|
|
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link to="/dashboard/settings">
|
|
Settings
|
|
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={logout}>
|
|
Log out
|
|
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|