From 9a4a7658b9f440dca5d932cf657abb5e9df8cf17 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 27 Dec 2023 16:30:51 +0530
Subject: [PATCH] feat: added MultipleAvatar component

---
 frontend/src/components/MultipleAvatar.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 frontend/src/components/MultipleAvatar.vue

diff --git a/frontend/src/components/MultipleAvatar.vue b/frontend/src/components/MultipleAvatar.vue
new file mode 100644
index 00000000..225e81ce
--- /dev/null
+++ b/frontend/src/components/MultipleAvatar.vue
@@ -0,0 +1,20 @@
+<template>
+  <div v-if="avatars?.length" class="mr-1.5 flex flex-row-reverse items-center cursor-pointer">
+    <Tooltip :text="avatar.name" v-for="avatar in reverseAvatars" :key="avatar.name">
+      <Avatar
+        class="-mr-1.5 transform border-2 border-white transition hover:z-10 hover:scale-125"
+        shape="circle"
+        :image="avatar.image"
+        :label="avatar.label"
+        size="lg"
+      />
+    </Tooltip>
+  </div>
+</template>
+<script setup>
+import { Avatar, Tooltip } from 'frappe-ui'
+import { computed, defineModel } from 'vue'
+
+const avatars = defineModel()
+const reverseAvatars = computed(() => avatars.value.reverse())
+</script>