Updated Nav bar avatar to use hooks

This commit is contained in:
2025-05-20 16:11:41 -05:00
parent 408bb140ba
commit 259aa46ef8
6 changed files with 49 additions and 48 deletions

View File

@ -10,7 +10,7 @@ type AvatarUploadProps = {
};
export const AvatarUpload = ({ profile, onAvatarUploaded }: AvatarUploadProps) => {
const { avatarUrl } = useAvatar(profile);
const { avatarUrl, isLoading } = useAvatar(profile);
const { isUploading, fileInputRef, uploadToStorage } = useFileUpload();
const handleAvatarClick = () => {
@ -27,6 +27,22 @@ export const AvatarUpload = ({ profile, onAvatarUploaded }: AvatarUploadProps) =
}
};
if (isLoading) {
return (
<div className="flex flex-col items-center">
<div className="relative group cursor-pointer mb-4">
<Avatar>
<AvatarFallback className="text-2xl">
{profile?.full_name
? profile.full_name.split(' ').map(n => n[0]).join('').toUpperCase()
: <User size={32} />}
</AvatarFallback>
</Avatar>
</div>
</div>
);
}
return (
<div className="flex flex-col items-center">
<div className="relative group cursor-pointer mb-4" onClick={handleAvatarClick}>