Version 1.0.0 - Frontend

src/components/Widget/View/Player/ActualChannel.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="channel-message">
+          <Tag color="var(--text-error)" v-if="!globalStore.currentChannel"><span class="tag-channel"><span>Vous</span> <span>êtes</span> déconnecté </span></Tag>
+          <Tag color="var(--text-success)" v-else><span class="tag-channel">Connecté <span>à</span> <Icon icon="fa-solid fa-volume-up"/> {{ globalStore.currentChannel.name }}</span></Tag>
+    </div>
+</template>
+<script setup>
+import { useGlobalStore } from '@/stores/globalStore';
+import Tag from '@/components/UI/Tag.vue';
+import { onMounted } from 'vue';
+import { updateChannel } from '@/utils/Logic';
+
+const globalStore = useGlobalStore();
+
+onMounted(() => {
+    updateChannel()
+})
+
+</script>
+<style scoped>
+.channel-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+}
+
+.channel-message p {
+  margin: 0;
+}
+
+.tag-channel {
+  font-size: 1.2em;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+</style>