File size: 1,873 Bytes
76e638f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | class StatusIndicator extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.status-container {
display: flex;
align-items: center;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
background: rgba(20, 20, 30, 0.6);
backdrop-filter: blur(16px);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 0.25rem;
animation: pulse 2s infinite;
}
.online {
color: #06b6d4;
}
.offline {
color: #f43f5e;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
</style>
<div class="status-container">
<div class="status-dot online"></div>
<span class="status-text">SYNCED</span>
</div>
`;
}
setStatus(connected) {
const dot = this.shadowRoot.querySelector('.status-dot');
const text = this.shadowRoot.querySelector('.status-text');
if (connected) {
dot.classList.remove('offline');
dot.classList.add('online');
text.textContent = 'SYNCED';
} else {
dot.classList.remove('online');
dot.classList.add('offline');
text.textContent = 'OFFLINE';
}
}
}
customElements.define('status-indicator', StatusIndicator); |