vision-agent / components /user-menu.tsx
MingruiZhang's picture
google login
b841f1a
raw
history blame
2 kB
'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/dropdown-menu';
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>
);
}