Required Packet

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 RequiredPacketSlots({ className }: DropzoneExampleProps) {
13  return (
14    <section className={cn("bg-background rounded-lg border p-4", className)}>
15      <div className="mb-4 flex items-start justify-between gap-3">
16        <div>
17          <div className="text-sm font-medium">Required packet</div>
18          <div className="text-muted-foreground mt-1 text-xs">
19            Slot-level dropzones for checklist-driven uploads.
20          </div>
21        </div>
22        <div className="bg-muted/30 text-muted-foreground rounded-full border px-2 py-1 text-xs">
23          checklist
24        </div>
25      </div>
26      <div className="grid gap-3 md:grid-cols-3">
27        {["Identity proof", "Bank statement", "Board approval"].map((label) => (
28          <PacketSlot key={label} label={label} />
29        ))}
30      </div>
31    </section>
32  );
33}
34 
35function PacketSlot({ label }: { label: string }) {
36  const dropzone = useDropzone({
37    accept: ".pdf,.png,.jpg,.jpeg,image/*,application/pdf",
38    maxFiles: 1,
39  });
40  const selectedFile = dropzone.files[0];
41 
42  return (
43    <div
44      {...dropzone.getRootProps({
45        className: cn(
46          "min-h-44 rounded-md border border-dashed bg-muted/20 p-3 transition-colors",
47          dropzone.isDragging && "border-foreground/40 bg-accent/35",
48        ),
49      })}
50    >
51      <input {...dropzone.getInputProps({ className: "hidden" })} />
52      <div className="mb-3 flex items-center justify-between gap-2">
53        <div className="text-xs font-medium">{label}</div>
54        <div
55          className={cn(
56            "rounded-full px-2 py-0.5 text-[11px]",
57            selectedFile
58              ? "bg-foreground text-background"
59              : "bg-background text-muted-foreground",
60          )}
61        >
62          {selectedFile ? "done" : "open"}
63        </div>
64      </div>
65      {selectedFile ? (
66        <div className="text-center">
67          <FileThumbnail
68            file={selectedFile.file}
69            thumbnailShape="square"
70            thumbnailSize="lg"
71            className="bg-background mx-auto"
72          />
73          <div className="mt-2 line-clamp-2 text-xs font-medium break-words">
74            {selectedFile.file.name}
75          </div>
76          <button
77// … truncated