Version 1.0.0 - Finalisation du composant Servers

src/components/Widget/ServerListItem.vue

@@ -0,0 +1,102 @@
+<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>
+            <ServerOnlinePicture class="sop" :key="server.id" v-if="server.members.length > 0" :members="server.members"/>
+            <Button class="btn" @click="access()">Accéder</Button>
+        </div>
+    </Box>
+</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';
+const router = useRouter();
+
+const globalStore = useGlobalStore();
+
+const props = defineProps({
+    server: {
+        type: Object,
+        required: true,
+        default: () => ({
+            id: '',
+            name: '',
+            owner: false,
+            icon: '',
+            members: [],
+            serverMember: 0,
+            connected: false
+        })
+    }
+});
+
+function access() {
+    router.push(`/servers/${props.server.id}`);
+}
+</script>
+<style scoped>
+.container-avatar {
+    display: flex;
+    align-items: center;
+    gap: 10px;;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}   
+
+@media screen and (max-width: 768px) {
+    .container-list {
+        flex-direction: column;
+        gap: 20px;;
+
+    }
+
+    .btn {
+        width: 100%;
+    }
+
+    .sop {
+        display: none;
+    }
+    
+}
+
+.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;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+</style>