Working on Avatar upload image.

app/(customer)/dashboard/profile/page.tsx

@@ -11,6 +11,7 @@ import {Button} from "@/components/ui/button";
 import {ButtonWithConfirm} from "@/components/wrappers/Button/ButtonWithConfirm/ButtonWithConfirm";
 import {ButtonDeleteAccount} from "@/components/wrappers/Dashboard/Profile/ButtonDeleteAccount/ButtonDeleteAccount";
 import {useIsMobile} from "@/hooks/use-mobile";
+import {AvatarWithUpload} from "@/components/wrappers/Dashboard/Profile/Avatar/AvatarWithUpload";
 
 export default async function RoutePage(props: PageParams<{}>) {
 
@@ -25,23 +26,13 @@ export default async function RoutePage(props: PageParams<{}>) {
         }
     })
 
-    console.log(userInfo)
-
-    const test = () => {
-        console.log("test")
-    }
 
     return (
         <Page>
             {/*<PageHeader>*/}
                 <div className="justify-between gap-2 sm:flex">
                     <PageTitle className="flex items-center">
-                        <Avatar className="size-14 mr-3">
-                            <AvatarFallback>{user.name?.[0]}</AvatarFallback>
-                            {user.image ? (
-                                <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`}/>
-                            ) : null}
-                        </Avatar>
+                        <AvatarWithUpload user={userInfo}/>
                         {user.name}
                         <Badge className="ml-3 hidden lg:block">{userInfo.authMethod}</Badge>
                     </PageTitle>