Function DownloadQueue

src/components/DownloadQueue.tsx:11–45

({ downloads, onPause, onResume, onCancel }: DownloadQueueProps)

}

export function DownloadQueue({ downloads, onPause, onResume, onCancel }: DownloadQueueProps) {
  const downloadArray = Array.from(downloads.values());

  if (downloadArray.length === 0) {
    return null;
  }

  return (
    <div className="bg-dark-surface border border-dark-border rounded-lg p-4 mb-4">
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-dark-text font-semibold flex items-center gap-2">
          <svg className="w-5 h-5 text-dark-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
          </svg>
          Active Downloads
        </h3>
        <span className="text-sm text-dark-text-secondary">
          {downloadArray.length} {downloadArray.length === 1 ? 'download' : 'downloads'}
        </span>
      </div>

      <div className="space-y-3">
        {downloadArray.map((download) => (
          <DownloadQueueItem
            key={download.model_name}
            download={download}
            onPause={() => onPause(download.model_name)}
            onResume={() => onResume(download.model_name)}
            onCancel={() => onCancel(download.model_name)}
          />
        ))}
      </div>
    </div>
  );
}

interface DownloadQueueItemProps {
  download: HfDownloadProgress;