marzban-dev
49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Props = {
|
|
max: number;
|
|
size: string;
|
|
items: string[];
|
|
};
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { items, max } = toRefs(props);
|
|
|
|
// computed
|
|
|
|
const displayedAvatars = computed(() => items.value.slice(0, max.value));
|
|
|
|
const remaining = computed(() => items.value.length - max.value);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center">
|
|
<div
|
|
v-if="remaining > 0"
|
|
class="flex-col-center bg-black text-white font-semibold rounded-full text-[10px] z-[1]"
|
|
:style="{ width: size, height: size }"
|
|
>
|
|
+{{ remaining }}
|
|
</div>
|
|
<div
|
|
v-for="(item, index) in displayedAvatars"
|
|
:key="index"
|
|
class="relative bg-gray-400 border border-black rounded-full -ms-2"
|
|
:class="index < 0 ? '' : ''"
|
|
:style="{ width: size, height: size, zIndex: index + 2 }"
|
|
>
|
|
<NuxtImg
|
|
:src="item"
|
|
loading="lazy"
|
|
fetch-priority="low"
|
|
alt="avatar"
|
|
class="rounded-full object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|