Version 1.0.0 - Création du Header

src/components/Widget/ServerItem.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="container-avatar">
+        <ServerAvatar :server-id="server.id" :src="server.icon"/>
+        <div class="info">
+            <p class="name">{{ server.name }}</p>
+            <p class="data"><Icon style="font-size: 10px;" :color="server.connected ? '#0BFF89' : '#FF0A0A'" icon="fa-solid fa-circle"/> {{ server.connected ? 'En ligne' : 'Hors ligne' }} - {{ server.serverMember }} membres</p>
+         </div>
+    </div>
+</template>
+<script setup>
+import ServerAvatar from '../UI/ServerAvatar.vue';
+
+const props = defineProps({
+    server: {
+        type: Object,
+        default: () => ({
+            id: '',
+            name: 'Aucun serveur séléctionné',
+            owner: false,
+            icon: '',
+            members: [],
+            serverMember: 0,
+            connected: false
+        })
+    }
+});
+
+</script>
+<style scoped>
+.container-avatar {
+    display: flex;
+    align-items: center;
+    gap: 10px;;
+}
+
+
+p {
+    margin: 0;
+}
+
+.data {
+    color: var(--text-secondary);
+    font-size: 0.8em;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+</style>

src/components/Widget/ServerListItem.vue

@@ -1,13 +1,7 @@
 <template>
     <Box no-shadow level="second" padding="closed">
         <div class="container-list">
-            <div class="container-avatar">
-                <ServerAvatar :server-id="server.id" :src="server.icon"/>
-                <div class="info">
-                    <p class="name">{{ server.name }}</p>
-                    <p class="data"><Icon style="font-size: 10px;" :color="server.connected ? '#0BFF89' : '#FF0A0A'" icon="fa-solid fa-circle"/> {{ server.connected ? 'En ligne' : 'Hors ligne' }} - {{ server.serverMember }} membres</p>
-                </div>
-            </div>
+            <ServerItem :server="server"/>
             <ServerOnlinePicture class="sop" :key="server.id" v-if="server.members.length > 0" :members="server.members"/>
             <Button class="btn" @click="access()">Accéder</Button>
         </div>
@@ -15,12 +9,11 @@
 </template>
 <script setup>
 import Box from '@/components/UI/Box.vue';
-import ServerAvatar from '../UI/ServerAvatar.vue';
 import Button from '../UI/Button.vue';
-import IconAction from '../UI/IconAction.vue';
 import { useGlobalStore } from '@/stores/globalStore';
 import { useRouter } from 'vue-router';
 import ServerOnlinePicture from '@/components/Widget/ServerOnlinePicture.vue';
+import ServerItem from '@/components/Widget/ServerItem.vue';
 const router = useRouter();
 
 const globalStore = useGlobalStore();
@@ -46,11 +39,6 @@ function access() {
 }
 </script>
 <style scoped>
-.container-avatar {
-    display: flex;
-    align-items: center;
-    gap: 10px;;
-}
 
 .actions {
     display: flex;
@@ -78,25 +66,17 @@ function access() {
 .container-list {
     display: flex;
     justify-content: space-between;
-    align-items: center;    
-}
-
-p {
-    margin: 0;
-}
-
-.data {
-    color: var(--text-secondary);
-    font-size: 0.8em;
-    display: flex;
     align-items: center;
-    gap: 3px;
+    position: relative;    
 }
 
-.info {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
+.sop {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
+
+
 </style>