From dd78b22f32951ce18bd914b4e7bccedef2eae64d Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 27 Feb 2025 20:47:11 +0330
Subject: [PATCH] added avatar group component

---
 frontend/components/global/AvatarGroup.vue | 46 ++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 frontend/components/global/AvatarGroup.vue

diff --git a/frontend/components/global/AvatarGroup.vue b/frontend/components/global/AvatarGroup.vue
new file mode 100644
index 0000000..6e65bad
--- /dev/null
+++ b/frontend/components/global/AvatarGroup.vue
@@ -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>