67 lines
1.2 KiB
Vue
67 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useCanvasStore } from '../stores/canvas'
|
|
|
|
const canvasStore = useCanvasStore()
|
|
|
|
const statusText = computed(() => {
|
|
return canvasStore.isConnected ? 'Conectado' : 'Desconectado'
|
|
})
|
|
|
|
const statusClass = computed(() => {
|
|
return canvasStore.isConnected ? 'connected' : 'disconnected'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="status-bar">
|
|
<div class="status-indicator" :class="statusClass">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">{{ statusText }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.status-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.status-indicator.connected {
|
|
background: rgba(34, 197, 94, 0.1);
|
|
color: #22c55e;
|
|
}
|
|
|
|
.status-indicator.connected .status-dot {
|
|
background: #22c55e;
|
|
box-shadow: 0 0 8px #22c55e;
|
|
}
|
|
|
|
.status-indicator.disconnected {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: #ef4444;
|
|
}
|
|
|
|
.status-indicator.disconnected .status-dot {
|
|
background: #ef4444;
|
|
}
|
|
</style>
|