55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useSession, signOut } from "next-auth/react";
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from "~/app/_components/ui/avatar";
|
|
import { Button } from "~/app/_components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "~/app/_components/ui/dropdown-menu";
|
|
|
|
export function UserNav() {
|
|
const session = useSession();
|
|
|
|
const profilePic = session.data?.user.image ?? undefined;
|
|
const name = session.data?.user.name;
|
|
const email = session.data?.user.email;
|
|
|
|
const handleLogout = () => signOut();
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
|
|
<Avatar className="h-9 w-9">
|
|
<AvatarImage src={profilePic} alt="user's profile picture" />
|
|
<AvatarFallback>{name?.charAt(0)}</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56" align="end" forceMount>
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex flex-col space-y-1">
|
|
{name && <p className="text-sm font-medium leading-none">{name}</p>}
|
|
{email && (
|
|
<p className="text-muted-foreground text-xs leading-none">
|
|
{email}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleLogout}>Log out</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|