Disabled Dropzone

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useDropzone } from "@/components/ui/dropzone";
5 
6import { type DropzoneExampleProps } from "./dropzone-example-shared";
7 
8export function DisabledDropzone({ className }: DropzoneExampleProps) {
9  const dropzone = useDropzone({ disabled: true, multiple: true });
10 
11  return (
12    <section
13      {...dropzone.getRootProps(
14        dropzone.getTriggerProps({
15          "data-slot": "dropzone",
16          className: cn(
17            "flex min-h-40 flex-col justify-center rounded-lg border border-dashed bg-muted/20 p-4 opacity-60 outline-none",
18            className,
19          ),
20        }),
21      )}
22    >
23      <input {...dropzone.getInputProps({ className: "hidden" })} />
24      <div className="text-sm font-medium">Disabled state</div>
25      <div className="text-muted-foreground mt-1 text-xs">
26        The primitive disables input, trigger focus, and drag state.
27      </div>
28    </section>
29  );
30}