added avatar group component

2025-02-27 20:47:11 +03:30
parent 939516a280
commit dd78b22f32
1 changed files with 46 additions and 0 deletions
@@ -0,0 +1,46 @@
+<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 }"
+        >
+            <img
+                :src="item"
+                alt="avatar"
+                class="rounded-full object-cover w-full h-full"
+            />
+        </div>
+    </div>
+</template>