Added UserAvatar

resources/js/pages/settings/Profile.vue

@@ -6,7 +6,6 @@ import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileCo
 import DeleteUser from '@/components/DeleteUser.vue';
 import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -14,8 +13,8 @@ import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { edit } from '@/routes/profile/index';
 import { send } from '@/routes/verification';
-import { getInitials } from '@/composables/useInitials';
 import type { BreadcrumbItem, SettingsProfilePageProps } from '@/types';
+import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 
 defineProps<SettingsProfilePageProps>();
 
@@ -94,18 +93,7 @@ onBeforeUnmount(() => {
                     <div class="grid gap-3">
                         <Label for="avatar">Profile picture</Label>
                         <div class="flex items-center gap-4">
-                            <Avatar class="size-16 overflow-hidden rounded-lg">
-                                <AvatarImage
-                                    v-if="displayedAvatar"
-                                    :src="displayedAvatar"
-                                    :alt="user.name"
-                                />
-                                <AvatarFallback
-                                    class="rounded-lg font-semibold text-black dark:text-white"
-                                >
-                                    {{ getInitials(user.name) }}
-                                </AvatarFallback>
-                            </Avatar>
+                            <UserAvatar class="size-16" />
                             <div class="grid flex-1 gap-2">
                                 <div class="flex flex-col gap-2 sm:flex-row">
                                     <Input