72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useState, useEffect } from 'react';
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui';
|
|
import { useProfile, useAvatar } from '@/lib/hooks'
|
|
import { signOut } from '@/lib/actions';
|
|
import { User } from 'lucide-react';
|
|
|
|
const AvatarDropdown = () => {
|
|
const { profile } = useProfile();
|
|
const { avatarUrl, isLoading } = useAvatar(profile);
|
|
|
|
const handleSignOut = async () => {
|
|
await signOut();
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<Avatar>
|
|
<AvatarFallback className='animate-pulse'>
|
|
<User size={32} />
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger>
|
|
<Avatar className='cursor-pointer'>
|
|
{avatarUrl ? (
|
|
<AvatarImage src={avatarUrl} />
|
|
) : (
|
|
<AvatarFallback className="text-2xl">
|
|
{profile?.full_name
|
|
? profile.full_name.split(' ').map(n => n[0]).join('').toUpperCase()
|
|
: <User size={32} />}
|
|
</AvatarFallback>
|
|
)}
|
|
</Avatar>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuLabel>{profile?.full_name}</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link href='/profile' className='w-full justify-center'>
|
|
Edit profile
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator className='h-[2px]' />
|
|
<DropdownMenuItem asChild>
|
|
<button onClick={handleSignOut} className='w-full justify-center'>
|
|
Log out
|
|
</button>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
};
|
|
export default AvatarDropdown;
|