Controlled Queue

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import { useDropzone, type DropzoneFileItem } from "@/components/ui/dropzone";
7 
8import {
9  InlineFileRows,
10  RejectionRows,
11  type DropzoneExampleProps,
12} from "./dropzone-example-shared";
13 
14export function ControlledQueue({ className }: DropzoneExampleProps) {
15  const [files, setFiles] = React.useState<DropzoneFileItem[]>([]);
16  const dropzone = useDropzone({
17    files,
18    maxFiles: 4,
19    multiple: true,
20    onFilesChange: setFiles,
21  });
22 
23  return (
24    <section
25      {...dropzone.getRootProps({
26        className: cn(
27          "rounded-lg border bg-muted/20 p-4 transition-colors",
28          dropzone.isDragging && "border-foreground/40 bg-accent/35",
29          className,
30        ),
31      })}
32    >
33      <input {...dropzone.getInputProps({ className: "hidden" })} />
34      <div className="flex items-center justify-between gap-3">
35        <div>
36          <div className="text-sm font-medium">Controlled queue</div>
37          <div className="text-muted-foreground text-xs">
38            Parent-owned file state.
39          </div>
40        </div>
41        <div className="flex items-center gap-2">
42          <button
43            className="text-muted-foreground hover:bg-muted h-8 rounded-md border px-2 text-xs"
44            onClick={dropzone.clearFiles}
45            type="button"
46          >
47            Clear
48          </button>
49          <button
50            {...dropzone.getTriggerProps({
51              native: true,
52              className:
53                "inline-flex h-8 cursor-pointer items-center rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground outline-none focus-visible:ring-[3px] focus-visible:ring-ring/24",
54            })}
55          >
56            Browse
57          </button>
58        </div>
59      </div>
60      <InlineFileRows files={files} onRemove={dropzone.removeFile} />
61      <RejectionRows rejections={dropzone.lastIntake.fileRejections} />
62    </section>
63  );
64}