components/upload-progress.js

class UploadProgress extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .upload-container {
          background: white;
          border-radius: 8px;
          padding: 1rem;
          margin-top: 1rem;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .upload-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.5rem;
        }
        .upload-title {
          font-weight: 500;
          color: #333;
        }
        .upload-status {
          font-size: 0.8rem;
          color: #666;
        }
        .progress-bar {
          height: 6px;
          background: #eee;
          border-radius: 3px;
          overflow: hidden;
        }
        .progress {
          height: 100%;
          background: linear-gradient(to right, #6366f1, #a855f7);
          width: 0%;
          transition: width 0.3s ease;
        }
        .file-info {
          display: flex;
          align-items: center;
          margin-top: 0.5rem;
        }
        .file-icon {
          margin-right: 0.5rem;
          color: #6366f1;
        }
        .file-name {
          font-size: 0.9rem;
          color: #444;
        }
        .file-size {
          font-size: 0.8rem;
          color: #666;
          margin-left: auto;
        }
      </style>
      <div class="upload-container">
        <div class="upload-header">
          <div class="upload-title">Uploading Files</div>
          <div class="upload-status">0%</div>
        </div>
        <div class="progress-bar">
          <div class="progress"></div>
        </div>
        <div class="file-info">
          <i data-feather="file" class="file-icon" width="16"></i>
          <div class="file-name">Example.pdf</div>
          <div class="file-size">2.4MB</div>
        </div>
      </div>
    `;
    feather.replace();
  }
}
customElements.define('upload-progress', UploadProgress);