gib/T3-Template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Not even sure but I'm sure it's better

Browse Source
This commit is contained in:
Gabriel Brown
2025-05-20 16:38:40 -05:00
parent 259aa46ef8
commit 0f92f7eb7f
19 changed files with 331 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/default/profile/AvatarUpload.tsx
View File

@ -9,7 +9,10 @@ type AvatarUploadProps = {
onAvatarUploaded: (path: string) => Promise<void>;
};
export const AvatarUpload = ({ profile, onAvatarUploaded }: AvatarUploadProps) => {
export const AvatarUpload = ({
profile,
onAvatarUploaded,
}: AvatarUploadProps) => {
const { avatarUrl, isLoading } = useAvatar(profile);
const { isUploading, fileInputRef, uploadToStorage } = useFileUpload();
@ -20,7 +23,7 @@ export const AvatarUpload = ({ profile, onAvatarUploaded }: AvatarUploadProps) =
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
const result = await uploadToStorage(file, 'avatars');
if (result.success && result.path) {
await onAvatarUploaded(result.path);
@ -29,59 +32,77 @@ 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 className='flex flex-col items-center'>
<div className='mb-4'>
<Avatar className='h-32 w-32'>
<AvatarFallback className='text-2xl'>
{profile?.full_name ? (
profile.full_name
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase()
) : (
<User size={32} />
)}
</AvatarFallback>
</Avatar>
</div>
</div>
</div>
);
}
return (
<div className="flex flex-col items-center">
<div className="relative group cursor-pointer mb-4" onClick={handleAvatarClick}>
<Avatar className="h-32 w-32">
<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={profile?.full_name ?? 'User'} />
) : (
<AvatarFallback className="text-2xl">
{profile?.full_name
? profile.full_name.split(' ').map(n => n[0]).join('').toUpperCase()
: <User size={32} />}
<AvatarFallback className='text-2xl'>
{profile?.full_name ? (
profile.full_name
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase()
) : (
<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"
<div
className='absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
transition-all flex items-center justify-center'
>
<Pencil className="text-white opacity-0 group-hover:opacity-100
transition-opacity" size={24}
<Pencil
className='text-white opacity-0 group-hover:opacity-100
transition-opacity'
size={24}
/>
</div>
<input
ref={fileInputRef}
type="file"
accept="image/*"
className="hidden"
type='file'
accept='image/*'
className='hidden'
onChange={handleFileChange}
disabled={isUploading}
/>
</div>
{isUploading && (
<div className="flex items-center text-sm text-gray-500 mt-2">
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
<div className='flex items-center text-sm text-gray-500 mt-2'>
<Loader2 className='h-4 w-4 mr-2 animate-spin' />
Uploading...
</div>
)}
<p className="text-sm text-gray-500 mt-2">
<p className='text-sm text-gray-500 mt-2'>
Click on the avatar to upload a new image
</p>
</div>
);
}
};