marzban-dev
50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import { useImage } from "@vueuse/core";
|
|
|
|
// types
|
|
|
|
type Props = {
|
|
src: string | null | undefined;
|
|
alt: string;
|
|
};
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { src } = toRefs(props);
|
|
|
|
// state
|
|
|
|
const { isLoading } = useImage({ src: src.value ?? '' });
|
|
</script>
|
|
|
|
<template>
|
|
<AvatarRoot
|
|
class="flex-center size-full select-none rounded-full align-middle overflow-hidden inset-shadow-black/20 inset-shadow-sm"
|
|
>
|
|
<Skeleton
|
|
v-if="isLoading && !!src"
|
|
class="w-full !h-[110%] !rounded-full aspect-square"
|
|
/>
|
|
<template v-else>
|
|
<AvatarImage
|
|
v-if="!!src"
|
|
class="!size-full rounded-full object-cover"
|
|
:src="src"
|
|
:alt="alt"
|
|
/>
|
|
<AvatarFallback
|
|
class="flex-center size-full text-sm font-medium rounded-full"
|
|
:delay-ms="600"
|
|
>
|
|
<div class="size-full rounded-full flex-center">
|
|
<Icon name="ci:profile" size="16" class="**:stroke-black" />
|
|
</div>
|
|
</AvatarFallback>
|
|
</template>
|
|
</AvatarRoot>
|
|
</template>
|