42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<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>
|