File DropzoneFile Dropzone

"use client";

import * as React from "react";
import { FileDropzone, FileDropzoneItem, FileDropzoneList } from "@/components/ui/notchset/file-dropzone";

type Upload = { id: string; name: string; size: number; status: "uploading" | "ready" };

export function DocsUpload() {
  const [files, setFiles] = React.useState<Upload[]>([]);
  return (
    <div className="grid gap-3">
      <FileDropzone
        title="DROP DOCS"
        onFiles={(list) => setFiles((f) => [...f, ...list.map((file) => ({ id: crypto.randomUUID(), name: file.name, size: file.size, status: "uploading" as const }))])}
      />
      <FileDropzoneList>
        {files.map((f) => (
          <FileDropzoneItem key={f.id} name={f.name} size={f.size} status={f.status} onRemove={() => setFiles((all) => all.filter((x) => x.id !== f.id))} />
        ))}
      </FileDropzoneList>
    </div>
  );
}