Added UserAvatar

2026-06-24 16:34:00 +02:00
parent 0d26113ba7
commit 1f16393dca
5 changed files with 89 additions and 46 deletions
@@ -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>