Upload queue

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { UploadQueue, type QueuedFile } from "@/components/ui/upload-queue"

const startFiles: QueuedFile[] = [
  { id: "f1", name: "board-pack-q3.pdf", size: 4_200_000, progress: 100, status: "done" },
  { id: "f2", name: "bank-statements-sept.csv", size: 860_000, progress: 40, status: "uploading" },
  { id: "f3", name: "receipts-october.zip", size: 18_400_000, progress: 0, status: "queued" },
  { id: "f4", name: "contract-ostra.docx", size: 220_000, progress: 62, status: "error", error: "The connection dropped. Try again." },
];

export function UploadQueueDemo() {
  const [files, setFiles] = useState(startFiles);
  useEffect(() => {
    const id = setInterval(() => {
      setFiles((current) => {
        let started = current.some((file) => file.status === "uploading");
        return current.map((file) => {
          if (file.status === "uploading") {
            const progress = Math.min(100, file.progress + 6 + Math.random() * 10);
            return progress >= 100 ? { ...file, progress: 100, status: "done" as const } : { ...file, progress };
          }
          if (file.status === "queued" && !started) {
            started = true;
            return { ...file, status: "uploading" as const };
          }
          return file;
        });
      });
    }, 400);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="grid w-full max-w-md gap-3">
      <UploadQueue
        files={files}
        onRetry={(id) => setFiles((current) => current.map((file) => (file.id === id ? { ...file, status: "queued", progress: 0, error: undefined } : file)))}
        onCancel={(id) => setFiles((current) => current.filter((file) => file.id !== id))}
        onClearDone={() => setFiles((current) => current.filter((file) => file.status !== "done"))}
      />
      <Button size="sm" variant="secondary" className="w-fit" onClick={() => setFiles((current) => [...current, { id: `f${Date.now()}`, name: `scan-${current.length + 1}.pdf`, size: 1_300_000, progress: 0, status: "queued" }])}>Add a file</Button>
    </div>
  );
}