39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { useCurrentUser } from '@/hooks/useCurrentUser'
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
|
import { IoExitOutline } from 'react-icons/io5'
|
|
import LogoutButton from '@/components/auth/logout-button'
|
|
|
|
const fallbackInitials = (name?: string | null | undefined): string => {
|
|
return (name ?? '').split(' ').map((w: string) => w[0]).join('').toUpperCase()
|
|
}
|
|
|
|
const UserButton = () => {
|
|
const user = useCurrentUser()
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className="outline-0">
|
|
<Avatar>
|
|
<AvatarImage src={user?.image || ''} alt="User Avatar"/>
|
|
<AvatarFallback className="bg-sky-600 text-muted text-lg font-light">
|
|
{fallbackInitials(user?.name)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-28 p-0" align="end">
|
|
<LogoutButton>
|
|
<DropdownMenuItem className="cursor-pointer p-2">
|
|
<IoExitOutline className="w-4 h-4 mr-2"/>
|
|
Logout
|
|
</DropdownMenuItem>
|
|
</LogoutButton>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
|
|
export default UserButton
|