30 lines
1.1 KiB
Vue
30 lines
1.1 KiB
Vue
<template>
|
|
<AvatarRoot class="inline-flex select-none items-center justify-center overflow-hidden align-middle" :class="SIZES[size]">
|
|
<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';
|
|
const { src, icon, text, size = 'medium' } = defineProps<{
|
|
src: string
|
|
icon?: string
|
|
text?: string
|
|
size?: keyof typeof SIZES
|
|
}>();
|
|
const loading = ref(true);
|
|
</script>
|
|
<script lang="ts">
|
|
const SIZES = {
|
|
'small': 'h-6',
|
|
'medium': 'h-10',
|
|
'large': 'h-16',
|
|
};
|
|
</script> |