Version 1.0.0 - Finalisation du composant Servers

src/components/Widget/ServerOnlinePicture.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+    <Avatar v-for="member in members"
+        :key="member.id"
+        :user-id="member.id"
+        :avatar-url="member.avatar"
+        :isMod="member.isMod"
+        :isOwner="member.isOwner"
+        :isAdmin="member.isAdmin"
+        :class="`avatar`"/>
+        
+    <Circle style="z-index: 10;" class="avatar" v-if="length > 4">+ {{ length - 4}}</Circle>
+    </div>
+   
+
+</template>
+<script setup>
+import Avatar from '../UI/Avatar.vue';
+import Circle from '../UI/Circle.vue';
+
+const props = defineProps({
+    members: {
+        type: Array,
+        default: () => []
+    },  
+})
+
+// ne garder que les quatres premiers membres
+const length = props.members.length;
+const members = props.members.slice(0, 4);
+
+</script>
+<style scoped>
+div{
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  margin-left: -10px; /* Ajustez cette valeur pour contrôler le chevauchement */
+}
+</style>