Added UserAvatar

resources/js/components/AppHeader.vue

@@ -5,7 +5,6 @@ import { computed } from 'vue';
 import AppLogo from '@/components/AppLogo.vue';
 import AppLogoIcon from '@/components/AppLogoIcon.vue';
 import Breadcrumbs from '@/components/Breadcrumbs.vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
@@ -33,10 +32,10 @@ import {
 } from '@/components/ui/tooltip';
 import UserMenuContent from '@/components/UserMenuContent.vue';
 import { useCurrentUrl } from '@/composables/useCurrentUrl';
-import { getInitials } from '@/composables/useInitials';
 import { toUrl } from '@/lib/utils';
 import { dashboard } from '@/routes/index';
 import type { BreadcrumbItem, NavItem } from '@/types';
+import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 
 type Props = {
     breadcrumbs?: BreadcrumbItem[];
@@ -245,20 +244,7 @@ const rightNavItems: NavItem[] = [
                                 size="icon"
                                 class="focus-within:ring-primary relative size-10 w-auto rounded-full p-1 focus-within:ring-2"
                             >
-                                <Avatar
-                                    class="size-8 overflow-hidden rounded-full"
-                                >
-                                    <AvatarImage
-                                        v-if="auth.user.avatar"
-                                        :src="auth.user.avatar"
-                                        :alt="auth.user.name"
-                                    />
-                                    <AvatarFallback
-                                        class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
-                                    >
-                                        {{ getInitials(auth.user?.name) }}
-                                    </AvatarFallback>
-                                </Avatar>
+                                <UserAvatar rounded />
                             </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end" class="w-56">

resources/js/components/UserInfo.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { useInitials } from '@/composables/useInitials';
 import type { User } from '@/types';
+import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 
 type Props = {
     user: User;
@@ -22,12 +22,7 @@ const showAvatar = computed(
 </script>
 
 <template>
-    <Avatar class="h-8 w-8 overflow-hidden rounded-lg">
-        <AvatarImage v-if="showAvatar" :src="user.avatar!" :alt="user.name" />
-        <AvatarFallback class="rounded-lg text-black dark:text-white">
-            {{ getInitials(user.name) }}
-        </AvatarFallback>
-    </Avatar>
+    <UserAvatar />
 
     <div class="grid flex-1 text-left text-sm leading-tight">
         <span class="truncate font-medium">{{ user.name }}</span>

resources/js/components/ui/avatar/UserAvatar.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { getInitials } from "@/composables/useInitials";
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+} from "@/components/ui/avatar/index";
+import { usePage } from "@inertiajs/vue3";
+import { computed, PropType } from "vue";
+import { UserModel } from "@/types/models/user-model";
+
+const props = defineProps({
+    user: {
+        type: Object as PropType<UserModel>,
+    },
+    rounded: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const page = usePage();
+const auth = computed(() => page.props.auth);
+
+const user = computed(() => props.user ?? auth.value.user)
+</script>
+
+<template>
+    <Avatar class="size-8 overflow-hidden" :class="rounded ? 'rounded-full' : 'rounded-lg'">
+        <AvatarImage
+            v-if="user.avatar"
+            :src="user.avatar"
+            :alt="user.name"
+        />
+        <AvatarFallback
+            class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
+        >
+            {{ getInitials(auth.user?.name) }}
+        </AvatarFallback>
+    </Avatar>
+</template>