Spreadsheet Import

1"use client";
2 
3import { Table2, 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 SpreadsheetImportCard({ className }: DropzoneExampleProps) {
16  const dropzone = useDropzone({
17    accept:
18      ".csv,.xls,.xlsx,text/csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
19    maxFiles: 1,
20  });
21  const selectedFile = dropzone.files[0];
22 
23  return (
24    <section
25      {...dropzone.getRootProps({
26        className: cn(
27          "rounded-lg border bg-background p-4 transition-colors",
28          dropzone.isDragging && "border-foreground/40 bg-accent/35",
29          className,
30        ),
31      })}
32    >
33      <input {...dropzone.getInputProps({ className: "hidden" })} />
34      <div className="flex items-start justify-between gap-3">
35        <div>
36          <div className="flex items-center gap-2 text-sm font-medium">
37            <Table2 className="text-muted-foreground size-4" aria-hidden />
38            Spreadsheet mapper
39          </div>
40          <div className="text-muted-foreground mt-1 text-xs">
41            A single sheet feeds a mapping workflow.
42          </div>
43        </div>
44        <button
45          {...dropzone.getTriggerProps({
46            native: true,
47            className:
48              "inline-flex h-8 shrink-0 cursor-pointer items-center rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground outline-none focus-visible:ring-[3px] focus-visible:ring-ring/24",
49          })}
50        >
51          Choose
52        </button>
53      </div>
54      <div className="bg-muted/20 mt-4 rounded-md border border-dashed p-3">
55        {selectedFile ? (
56          <div className="space-y-3">
57            <div className="flex min-w-0 items-center gap-3">
58              <FileThumbnail
59                file={selectedFile.file}
60                previewAspectRatio={1}
61                className="bg-background size-12 shrink-0"
62              />
63              <div className="min-w-0 flex-1">
64                <div className="truncate text-sm font-medium">
65                  {selectedFile.file.name}
66                </div>
67                <div className="text-muted-foreground text-xs">
68// … truncated