Native Button Queue

1"use client";
2 
3import { Paperclip } from "lucide-react";
4 
5import { cn } from "@/lib/utils";
6import { useDropzone } from "@/components/ui/dropzone";
7 
8import {
9  InlineFileRows,
10  RejectionRows,
11  type DropzoneExampleProps,
12} from "./dropzone-example-shared";
13 
14export function NativeButtonQueue({ className }: DropzoneExampleProps) {
15  const dropzone = useDropzone({
16    accept: "image/*,.pdf",
17    maxFiles: 2,
18    multiple: true,
19  });
20 
21  return (
22    <section
23      {...dropzone.getRootProps({
24        className: cn(
25          "rounded-lg border bg-background p-4 transition-colors",
26          dropzone.isDragging && "border-foreground/40 bg-accent/35",
27          className,
28        ),
29      })}
30    >
31      <input {...dropzone.getInputProps({ className: "hidden" })} />
32      <div className="flex items-center justify-between gap-3">
33        <div>
34          <div className="text-sm font-medium">Native button trigger</div>
35          <div className="text-muted-foreground text-xs">
36            A real button uses browser button semantics.
37          </div>
38        </div>
39        <button
40          {...dropzone.getTriggerProps({
41            native: true,
42            className:
43              "inline-flex h-8 cursor-pointer items-center gap-2 rounded-md border bg-background px-3 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/24",
44          })}
45        >
46          <Paperclip className="size-3.5" aria-hidden />
47          Add
48        </button>
49      </div>
50      <InlineFileRows files={dropzone.files} onRemove={dropzone.removeFile} />
51      <RejectionRows rejections={dropzone.lastIntake.fileRejections} />
52    </section>
53  );
54}