82 lines
1.7 KiB
Vue
82 lines
1.7 KiB
Vue
<template>
|
|
<Box no-shadow level="second" padding="closed">
|
|
<div class="container-list">
|
|
<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>
|
|
</Box>
|
|
</template>
|
|
<script setup>
|
|
import Box from '@/components/UI/Box.vue';
|
|
import Button from '../UI/Button.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();
|
|
|
|
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;
|
|
}
|
|
|
|
}
|
|
|
|
.container-list {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.sop {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
|
|
|
|
</style> |