Pinboard Drop Surface

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useDropzone } from "@/components/ui/dropzone";
5import { FileThumbnail } from "@/components/ui/file-thumbnail";
6 
7import {
8  RejectionRows,
9  type DropzoneExampleProps,
10} from "./dropzone-example-shared";
11 
12export function PinboardDropSurface({ className }: DropzoneExampleProps) {
13  const dropzone = useDropzone({
14    accept: ".pdf,.png,.jpg,.jpeg,image/*,application/pdf",
15    maxFiles: 8,
16    multiple: true,
17  });
18 
19  return (
20    <section
21      {...dropzone.getRootProps({
22        className: cn(
23          "rounded-lg border bg-background p-4 transition-colors",
24          dropzone.isDragging && "border-foreground/40 bg-accent/35",
25          className,
26        ),
27      })}
28    >
29      <input {...dropzone.getInputProps({ className: "hidden" })} />
30      <div className="mb-4 flex items-center justify-between gap-3">
31        <div>
32          <div className="text-sm font-medium">Pinboard drop surface</div>
33          <div className="text-muted-foreground mt-1 text-xs">
34            The whole canvas is the trigger.
35          </div>
36        </div>
37        <button
38          {...dropzone.getTriggerProps({
39            native: true,
40            className:
41              "inline-flex h-8 cursor-pointer items-center 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          Pin files
45        </button>
46      </div>
47      <div
48        {...dropzone.getTriggerProps({
49          className:
50            "grid min-h-72 cursor-pointer grid-cols-2 content-start gap-3 rounded-md border border-dashed bg-muted/20 p-3 outline-none transition-colors hover:bg-muted/30 focus-visible:ring-[3px] focus-visible:ring-ring/24 sm:grid-cols-3",
51        })}
52      >
53        {dropzone.files.length ? (
54          dropzone.files.map((item, index) => (
55            <div
56              key={item.id}
57              className={cn(
58                "bg-background min-w-0 rounded-md border p-2 text-center shadow-xs",
59                index % 2 === 0 && "translate-y-2",
60                index % 3 === 0 && "-rotate-1",
61                index % 3 === 1 && "rotate-1",
62              )}
63            >
64              <FileThumbnail
65                file={item.file}
66                previewAspectRatio={1}
67                className="mx-auto size-14"
68              />
69              <div className="mt-2 line-clamp-2 text-xs leading-tight break-words">
70// … truncated