Custom Thumbnail Grid

1"use client";
2 
3import { Upload } from "lucide-react";
4 
5import { cn } from "@/lib/utils";
6import { useDropzone } from "@/components/ui/dropzone";
7import { FileThumbnail } from "@/components/ui/file-thumbnail";
8 
9import {
10  RejectionRows,
11  type DropzoneExampleProps,
12} from "./dropzone-example-shared";
13 
14export function CustomThumbnailGrid({ className }: DropzoneExampleProps) {
15  const dropzone = useDropzone({
16    accept: ".pdf,.png,.jpg,.jpeg,image/*,application/pdf",
17    multiple: true,
18  });
19 
20  return (
21    <section
22      {...dropzone.getRootProps({
23        className: cn(
24          "rounded-lg border bg-background p-4 transition-colors",
25          dropzone.isDragging && "border-foreground/40 bg-accent/35",
26          className,
27        ),
28      })}
29    >
30      <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
31        <div>
32          <div className="text-sm font-medium">Custom thumbnail grid</div>
33          <div className="text-muted-foreground text-xs">
34            Direct useDropzone composition with FileThumbnail.
35          </div>
36        </div>
37        <button
38          {...dropzone.getTriggerProps({
39            native: true,
40            className:
41              "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",
42          })}
43        >
44          <Upload className="size-3.5" aria-hidden />
45          Select files
46        </button>
47      </div>
48      <input {...dropzone.getInputProps({ className: "hidden" })} />
49      <div className="bg-muted/20 grid min-h-36 grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-3 rounded-md border border-dashed p-3">
50        {dropzone.files.length ? (
51          dropzone.files.map((item) => (
52            <div key={item.id} className="min-w-0 text-center">
53              <FileThumbnail
54                file={item.file}
55                previewAspectRatio={1}
56                className="bg-background mx-auto size-16 shadow-sm"
57              />
58              <div className="mt-2 line-clamp-2 text-xs leading-tight break-words">
59                {item.file.name}
60              </div>
61            </div>
62          ))
63        ) : (
64          <div className="text-muted-foreground col-span-full grid place-items-center text-xs">
65            Drop PDFs or images here.
66          </div>
67        )}
68      </div>
69      <RejectionRows rejections={dropzone.lastIntake.fileRejections} />
70// … truncated