Version 1.0.0 - Finalisation de Account et de GuildHeader

src/components/Widget/Server/ServerListItem.vue

@@ -0,0 +1,104 @@
+<template>
+    <Box no-shadow level="second" padding="closed">
+        <div class="container-list">
+            <Server :server="server"/>
+            <ServerOnlinePicture class="sop" :key="server.id" v-if="server.members.length > 0" :members="server.members"/>
+            <section>
+            <Error v-if="userStore.userInfo.labels.includes('BAN_' + server.id)">Banni</Error>
+            <Button color-lower :disabled="userStore.userInfo.labels.includes('BAN_' + server.id)" class="btn" @click="access()"><Icon icon="fa-solid fa-right-to-bracket"/>Accéder</Button>
+            </section>
+        </div>
+    </Box>
+</template>
+<script setup>
+import Box from '@/components/UI/Box.vue';
+import Button from '@/components/UI/Button.vue';
+import { useGlobalStore } from '@/stores/globalStore';
+import { useRouter } from 'vue-router';
+import ServerOnlinePicture from '@/components/Widget/Server/ServerOnlinePicture.vue';
+import Server from '@/components/UI/Server.vue';
+import { useUserStore } from '@/stores/userStore';
+import Error from '@/components/UI/Error.vue';
+const router = useRouter();
+
+const userStore = useUserStore();
+
+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>
+
+.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;
+    }
+    
+    section {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: 10px;
+    }
+}
+
+.container-list {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;    
+}
+
+.btn svg {
+    font-size: 1.1em;
+}
+
+.sop {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+section {
+    display: flex;
+    align-items: center;
+    gap: 10px;  
+}
+
+
+</style>