113 lines
2.7 KiB
TypeScript
113 lines
2.7 KiB
TypeScript
import { useFileUpload } from '@/lib/hooks/useFileUpload';
|
|
import { useAuth } from '@/components/context';
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
CardContent,
|
|
} from '@/components/ui';
|
|
import { Loader2, Pencil, Upload, User } from 'lucide-react';
|
|
|
|
type AvatarUploadProps = {
|
|
onAvatarUploaded: (path: string) => Promise<void>;
|
|
};
|
|
|
|
export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
|
|
const { profile, avatarUrl } = useAuth();
|
|
const { isUploading, fileInputRef, uploadToStorage } = useFileUpload();
|
|
|
|
const handleAvatarClick = () => {
|
|
fileInputRef.current?.click();
|
|
};
|
|
|
|
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
const result = await uploadToStorage({
|
|
file,
|
|
bucket: 'avatars',
|
|
resize: true,
|
|
options: {
|
|
maxWidth: 500,
|
|
maxHeight: 500,
|
|
quality: 0.8,
|
|
},
|
|
replace: { replace: true, path: profile?.avatar_url ?? file.name },
|
|
});
|
|
if (result.success && result.data) {
|
|
await onAvatarUploaded(result.data);
|
|
}
|
|
};
|
|
|
|
const getInitials = (name: string | null | undefined): string => {
|
|
if (!name) return '';
|
|
return name
|
|
.split(' ')
|
|
.map((n) => n[0])
|
|
.join('')
|
|
.toUpperCase();
|
|
};
|
|
|
|
return (
|
|
<CardContent>
|
|
<div className='flex flex-col items-center'>
|
|
<div
|
|
className='relative group cursor-pointer mb-4'
|
|
onClick={handleAvatarClick}
|
|
>
|
|
<Avatar className='h-32 w-32'>
|
|
{avatarUrl ? (
|
|
<AvatarImage
|
|
src={avatarUrl}
|
|
alt={getInitials(profile?.full_name)}
|
|
width={128}
|
|
height={128}
|
|
/>
|
|
) : (
|
|
<AvatarFallback className='text-4xl'>
|
|
{profile?.full_name ? (
|
|
getInitials(profile.full_name)
|
|
) : (
|
|
<User size={32} />
|
|
)}
|
|
</AvatarFallback>
|
|
)}
|
|
</Avatar>
|
|
<div
|
|
className='absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
|
|
transition-all flex items-center justify-center'
|
|
>
|
|
<Upload
|
|
className='text-white opacity-0 group-hover:opacity-100
|
|
transition-opacity'
|
|
size={24}
|
|
/>
|
|
</div>
|
|
<div className='absolute inset-1 transition-all flex items-end justify-end'>
|
|
<Pencil
|
|
className='text-white opacity-100 group-hover:opacity-0
|
|
transition-opacity'
|
|
size={24}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<input
|
|
ref={fileInputRef}
|
|
type='file'
|
|
accept='image/*'
|
|
className='hidden'
|
|
onChange={handleFileChange}
|
|
disabled={isUploading}
|
|
/>
|
|
{isUploading && (
|
|
<div className='flex items-center text-sm text-gray-500 mt-2'>
|
|
<Loader2 className='h-4 w-4 mr-2 animate-spin' />
|
|
Uploading...
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
);
|
|
};
|