Comparison Pair

1"use client";
2 
3import { X } from "lucide-react";
4 
5import { cn } from "@/lib/utils";
6import { useDropzone } from "@/components/ui/dropzone";
7import { formatFileSize } from "@/components/ui/file-size-format";
8import { FileThumbnail } from "@/components/ui/file-thumbnail";
9 
10import {
11  RejectionRows,
12  type DropzoneExampleProps,
13} from "./dropzone-example-shared";
14 
15export function ComparisonPairUpload({ className }: DropzoneExampleProps) {
16  return (
17    <section className={cn("bg-background rounded-lg border p-4", className)}>
18      <div className="mb-4 flex items-start justify-between gap-3">
19        <div>
20          <div className="text-sm font-medium">Comparison pair</div>
21          <div className="text-muted-foreground mt-1 text-xs">
22            Two independent dropzones model original versus revision.
23          </div>
24        </div>
25        <div className="bg-muted/30 text-muted-foreground rounded-full border px-2 py-1 text-xs">
26          2 slots
27        </div>
28      </div>
29      <div className="grid gap-3 md:grid-cols-2">
30        <ComparisonSlot label="Original" />
31        <ComparisonSlot label="Revision" />
32      </div>
33    </section>
34  );
35}
36 
37function ComparisonSlot({ label }: { label: string }) {
38  const dropzone = useDropzone({
39    accept: ".pdf,.doc,.docx,application/pdf",
40    maxFiles: 1,
41  });
42  const selectedFile = dropzone.files[0];
43 
44  return (
45    <div
46      {...dropzone.getRootProps({
47        className: cn(
48          "rounded-md border border-dashed bg-muted/20 p-3 transition-colors",
49          dropzone.isDragging && "border-foreground/40 bg-accent/35",
50        ),
51      })}
52    >
53      <input {...dropzone.getInputProps({ className: "hidden" })} />
54      <div className="mb-3 flex items-center justify-between gap-2">
55        <div className="text-sm font-medium">{label}</div>
56        <button
57          {...dropzone.getTriggerProps({
58            native: true,
59            className:
60              "inline-flex h-7 cursor-pointer items-center rounded-md border bg-background px-2 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/24",
61          })}
62        >
63          {selectedFile ? "Replace" : "Choose"}
64        </button>
65      </div>
66      {selectedFile ? (
67        <div className="bg-background flex min-w-0 items-center gap-3 rounded-md border p-2">
68          <FileThumbnail
69            file={selectedFile.file}
70            thumbnailShape="square"
71            thumbnailSize="md"
72// … truncated