Evidence Timeline

1"use client";
2 
3import { Clock3, Paperclip, 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 EvidenceTimeline({ className }: DropzoneExampleProps) {
16  const dropzone = useDropzone({
17    accept: ".pdf,.png,.jpg,.jpeg,image/*,application/pdf",
18    maxFiles: 6,
19    multiple: true,
20  });
21 
22  return (
23    <section
24      {...dropzone.getRootProps({
25        className: cn(
26          "rounded-lg border bg-background p-4 transition-colors",
27          dropzone.isDragging && "border-foreground/40 bg-accent/35",
28          className,
29        ),
30      })}
31    >
32      <input {...dropzone.getInputProps({ className: "hidden" })} />
33      <div className="flex flex-wrap items-center justify-between gap-3">
34        <div>
35          <div className="flex items-center gap-2 text-sm font-medium">
36            <Clock3 className="text-muted-foreground size-4" aria-hidden />
37            Evidence timeline
38          </div>
39          <div className="text-muted-foreground mt-1 text-xs">
40            Files become ordered events inside a custom surface.
41          </div>
42        </div>
43        <button
44          {...dropzone.getTriggerProps({
45            native: true,
46            className:
47              "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",
48          })}
49        >
50          <Paperclip className="size-3.5" aria-hidden />
51          Add evidence
52        </button>
53      </div>
54      <div className="bg-muted/20 mt-4 grid min-h-44 auto-rows-min content-start items-start gap-3 rounded-md border border-dashed p-3 md:grid-cols-2">
55        {dropzone.files.length ? (
56          dropzone.files.map((item) => (
57            <div
58              key={item.id}
59              className="bg-background flex h-16 min-w-0 items-center gap-3 rounded-md border p-2"
60            >
61              <FileThumbnail
62                file={item.file}
63                thumbnailShape="square"
64                thumbnailSize="md"
65                className="shrink-0"
66              />
67              <div className="min-w-0 flex-1">
68// … truncated