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

Cleanup. Stuff from yesterday idk

Browse Source
This commit is contained in:
Gabriel Brown
2025-06-06 08:43:18 -05:00
parent a776c5a30a
commit 35e019558f
29 changed files with 866 additions and 694 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,11 @@
import { useFileUpload } from '@/lib/hooks/useFileUpload';
import { useAuth } from '@/components/context/auth';
import { Avatar, AvatarFallback, AvatarImage, CardContent } from '@/components/ui';
import {
Avatar,
AvatarFallback,
AvatarImage,
CardContent,
} from '@/components/ui';
import { Loader2, Pencil, Upload, User } from 'lucide-react';
type AvatarUploadProps = {
@ -28,16 +33,17 @@ export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
maxHeight: 500,
quality: 0.8,
},
replace: {replace: true, path: profile?.avatar_url ?? file.name},
replace: { replace: true, path: profile?.avatar_url ?? file.name },
});
if (result.success && result.path) {
await onAvatarUploaded(result.path);
if (result.success && result.data) {
await onAvatarUploaded(result.data);
}
};
const getInitials = (name: string | null | undefined): string => {
if (!name) return '';
return name.split(' ')
return name
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase();
@ -45,23 +51,29 @@ export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
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='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'
@ -88,13 +100,13 @@ export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
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>
{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>
);
};