Spaces:
Sleeping
Sleeping
File size: 2,232 Bytes
b841f1a 3ba9c0c b841f1a 3ba9c0c c69ef3e 3ba9c0c f80b091 c69ef3e 3ba9c0c f80b091 3ba9c0c f80b091 3ba9c0c f80b091 3ba9c0c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
'use client';
import Image from 'next/image';
import { type Session } from 'next-auth';
import { signOut } from 'next-auth/react';
import { Button } from '@/components/ui/Button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/DropdownMenu';
import { IconExternalLink } from '@/components/ui/Icons';
export interface UserMenuProps {
user: Session['user'];
}
function getUserInitials(name: string) {
const [firstName, lastName] = name.split(' ');
return lastName ? `${firstName[0]}${lastName[0]}` : firstName.slice(0, 2);
}
export function UserMenu({ user }: UserMenuProps) {
return (
<div className="flex items-center justify-between">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost">
{user?.image ? (
<Image
className="size-6 transition-opacity duration-300 rounded-full select-none ring-1 ring-zinc-100/10 hover:opacity-80"
src={user?.image ?? ''}
alt={user.name ?? 'Avatar'}
height={48}
width={48}
/>
) : (
<div className="flex items-center justify-center text-xs font-medium uppercase rounded-full select-none size-7 shrink-0 bg-muted/50 text-muted-foreground">
{user?.name ? getUserInitials(user?.name) : null}
</div>
)}
<span className="ml-2">{user?.name}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent sideOffset={8} align="start" className="w-[180px]">
<DropdownMenuItem className="flex-col items-start">
<div className="text-xs font-medium">{user?.name}</div>
<div className="text-xs text-zinc-500">{user?.email}</div>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() =>
signOut({
callbackUrl: '/',
})
}
className="text-xs"
>
Log Out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}
|