22 lines
947 B
Vue
22 lines
947 B
Vue
<template>
|
|
<AvatarRoot class="inline-flex h-12 w-12 select-none items-center justify-center overflow-hidden align-middle">
|
|
<AvatarImage class="h-full w-full object-cover" :src="src" asChild @loading-status-change="(status) => loading = status === 'loading'">
|
|
<img :src="src" />
|
|
</AvatarImage>
|
|
<AvatarFallback :delay-ms="0" class="text-light-100 dark:text-dark-100 leading-1 flex h-full w-full p-4 items-center justify-center bg-light-25 dark:bg-dark-25 font-medium">
|
|
<Loading v-if="loading" />
|
|
<Icon v-else-if="!!icon" :icon="icon" class="w-full h-full" />
|
|
<span v-else-if="!!text">{{ text }}</span>
|
|
</AvatarFallback>
|
|
</AvatarRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
const { src, icon, text } = defineProps<{
|
|
src: string
|
|
icon?: string
|
|
text?: string
|
|
}>();
|
|
const loading = ref(true);
|
|
</script> |