36 lines
1.1 KiB
Vue
36 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 } from "vue";
|
|
import type { UserAvatarProps } from "@/types";
|
|
|
|
const props = withDefaults(defineProps<UserAvatarProps>(), {
|
|
rounded: true,
|
|
});
|
|
|
|
const page = usePage();
|
|
const auth = computed(() => page.props.auth);
|
|
|
|
const user = computed(() => props.user ?? auth.value.user);
|
|
</script>
|
|
|
|
<template>
|
|
<Avatar
|
|
class="border-outline-variant bg-surface-container-high size-8 overflow-hidden border"
|
|
:class="rounded ? 'rounded-full' : 'rounded-lg'"
|
|
>
|
|
<AvatarImage v-if="user.avatar" :src="user.avatar" :alt="user.name" />
|
|
<AvatarFallback
|
|
class="bg-primary/12 text-on-primary-container text-xs font-bold dark:text-primary-fixed"
|
|
:class="rounded ? 'rounded-full' : 'rounded-lg'"
|
|
>
|
|
{{ getInitials(user.name) }}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</template>
|