components/connection-status.js

class ConnectionStatus extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .status-container {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 1rem;
          border-radius: 9999px;
          background: rgba(255, 255, 255, 0.9);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .status-indicator {
          width: 0.75rem;
          height: 0.75rem;
          border-radius: 9999px;
          transition: all 0.3s ease;
        }
        
        .status-text {
          font-size: 0.75rem;
          font-weight: 500;
          color: #4b5563;
        }
        
        .online {
          background-color: #10b981;
          box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
        }
        
        .offline {
          background-color: #ef4444;
          box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
        }
        
        .connecting {
          background-color: #f59e0b;
          animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
          0% { opacity: 1; }
          50% { opacity: 0.5; }
          100% { opacity: 1; }
        }
      </style>
      
      <div class="status-container">
        <div class="status-indicator ${navigator.onLine ? 'online' : 'offline'}"></div>
        <span class="status-text">${navigator.onLine ? 'Çevrimiçi' : 'Çevrimdışı'}</span>
      </div>
    `;
    
    // Add event listeners for online/offline status
    window.addEventListener('online', () => this.updateStatus(true));
    window.addEventListener('offline', () => this.updateStatus(false));
  }
  
  updateStatus(isOnline) {
    const indicator = this.shadowRoot.querySelector('.status-indicator');
    const text = this.shadowRoot.querySelector('.status-text');
    
    if (isOnline) {
      indicator.classList.remove('offline', 'connecting');
      indicator.classList.add('online');
      text.textContent = 'Çevrimiçi';
    } else {
      indicator.classList.remove('online', 'connecting');
      indicator.classList.add('offline');
      text.textContent = 'Çevrimdışı';
    }
  }
  
  setConnecting() {
    const indicator = this.shadowRoot.querySelector('.status-indicator');
    const text = this.shadowRoot.querySelector('.status-text');
    
    indicator.classList.remove('online', 'offline');
    indicator.classList.add('connecting');
    text.textContent = 'Bağlanıyor...';
  }
}

customElements.define('connection-status', ConnectionStatus);