Validation Only

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import {
7  useDropzone,
8  type DropzoneFileRejection,
9} from "@/components/ui/dropzone";
10 
11import {
12  RejectionRows,
13  type DropzoneExampleProps,
14} from "./dropzone-example-shared";
15 
16export function ValidationOnly({ className }: DropzoneExampleProps) {
17  const [lastIntake, setLastIntake] = React.useState({
18    acceptedFiles: [] as File[],
19    fileRejections: [] as DropzoneFileRejection[],
20  });
21  const dropzone = useDropzone({
22    accept: "application/pdf,.pdf",
23    files: [],
24    maxSize: 100 * 1024,
25    multiple: true,
26    onFilesChange: () => {},
27    onIntake: setLastIntake,
28  });
29 
30  return (
31    <section
32      {...dropzone.getRootProps(
33        dropzone.getTriggerProps({
34          "data-slot": "dropzone",
35          className: cn(
36            "flex min-h-40 cursor-pointer flex-col justify-center rounded-lg border border-dashed bg-background p-4 transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/24",
37            dropzone.isDragging && "border-foreground/40 bg-accent/35",
38            className,
39          ),
40        }),
41      )}
42    >
43      <input {...dropzone.getInputProps({ className: "hidden" })} />
44      <div className="text-sm font-medium">Validation only</div>
45      <div className="text-muted-foreground mt-1 text-xs">
46        PDF under 100 KB. Accepted files are reported, not stored.
47      </div>
48      <div className="mt-3 text-xs">
49        Accepted:{" "}
50        {lastIntake.acceptedFiles.map((file) => file.name).join(", ") || "none"}
51      </div>
52      <RejectionRows rejections={lastIntake.fileRejections} />
53    </section>
54  );
55}