88 lines
2.0 KiB
TypeScript
88 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui';
|
|
import { useAuth } from '@/components/context';
|
|
import { useRouter } from 'next/navigation';
|
|
import { signOut } from '@/lib/actions';
|
|
import { User } from 'lucide-react';
|
|
|
|
const AvatarDropdown = () => {
|
|
const { profile, avatarUrl, isLoading, refreshUserData } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const handleSignOut = async () => {
|
|
const result = await signOut();
|
|
if (result?.success) {
|
|
await refreshUserData();
|
|
router.push('/sign-in');
|
|
}
|
|
};
|
|
|
|
const getInitials = (name: string | null | undefined): string => {
|
|
if (!name) return '';
|
|
return name
|
|
.split(' ')
|
|
.map((n) => n[0])
|
|
.join('')
|
|
.toUpperCase();
|
|
};
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger>
|
|
<Avatar className='cursor-pointer'>
|
|
{avatarUrl ? (
|
|
<AvatarImage
|
|
src={avatarUrl}
|
|
alt={getInitials(profile?.full_name)}
|
|
width={64}
|
|
height={64}
|
|
/>
|
|
) : (
|
|
<AvatarFallback className='text-sm'>
|
|
{profile?.full_name ? (
|
|
getInitials(profile.full_name)
|
|
) : (
|
|
<User size={32} />
|
|
)}
|
|
</AvatarFallback>
|
|
)}
|
|
</Avatar>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuLabel>{profile?.full_name}</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link
|
|
href='/profile'
|
|
className='w-full justify-center cursor-pointer'
|
|
>
|
|
Edit profile
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator className='h-[2px]' />
|
|
<DropdownMenuItem asChild>
|
|
<button
|
|
onClick={handleSignOut}
|
|
className='w-full justify-center cursor-pointer'
|
|
>
|
|
Sign Out
|
|
</button>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
};
|
|
export default AvatarDropdown;
|