Non-Button Trigger

1"use client";
2 
3import { Upload } 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 NonButtonTrigger({ className }: DropzoneExampleProps) {
15  const dropzone = useDropzone({
16    accept: ".pdf,.csv,.txt,text/plain,text/csv,application/pdf",
17    maxFiles: 3,
18    multiple: true,
19  });
20 
21  return (
22    <section
23      {...dropzone.getRootProps({
24        className: cn(
25          "rounded-lg border bg-muted/20 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 gap-3">
33        <div
34          {...dropzone.getTriggerProps({
35            className:
36              "inline-flex h-9 cursor-pointer items-center gap-2 rounded-md border bg-background px-3 text-sm font-medium shadow-xs outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/24",
37          })}
38        >
39          <Upload className="size-4" aria-hidden />
40          Non-button trigger
41        </div>
42        <div className="min-w-0 text-sm">
43          <div className="font-medium">Controls upload</div>
44          <div className="text-muted-foreground truncate text-xs">
45            {dropzone.files.length
46              ? `${dropzone.files.length} attached`
47              : "No files attached"}
48          </div>
49        </div>
50      </div>
51      <InlineFileRows files={dropzone.files} onRemove={dropzone.removeFile} />
52      <RejectionRows rejections={dropzone.lastIntake.fileRejections} />
53    </section>
54  );
55}