Function FileUploadContent

Source

export function FileUploadContent({
  onFileLoaded,
  onError,
}: Readonly<FileUploadProps>) {
  return (
    <motion.section
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      <Card className="shadow-lg">
        <CardHeader className="flex flex-col gap-4">
          <div className="flex items-center gap-3">
            <div className="bg-primary/10 text-primary flex h-11 w-11 items-center justify-center rounded-full">
              <Upload className="h-5 w-5" />
            </div>
            <div>
              <CardTitle className="text-2xl font-semibold">
                Upload your Kenmei export
              </CardTitle>
              <CardDescription>
                Drop your CSV to kick off the import. Validation and parsing run
                automatically.
              </CardDescription>
            </div>
          </div>
        </CardHeader>

        <CardContent className="space-y-6">
          <Tabs defaultValue="upload" className="w-full">
            <TabsList className="bg-muted/40 grid h-[50px] w-full grid-cols-2 gap-2 rounded-lg p-1">
              <TabsTrigger
                value="upload"
                className="data-[state=active]:bg-background data-[state=active]:text-foreground flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition hover:border hover:border-slate-200 data-[state=active]:shadow-sm dark:hover:border-white/20"
              >
                <Upload className="h-4 w-4" />
                Upload
              </TabsTrigger>
              <TabsTrigger
                value="help"
                className="data-[state=active]:bg-background data-[state=active]:text-foreground flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition hover:border hover:border-slate-200 data-[state=active]:shadow-sm dark:hover:border-white/20"
              >
                <Info className="h-4 w-4" />
                How to export
              </TabsTrigger>
            </TabsList>

            <TabsContent value="upload" className="space-y-4 pt-6">
              <div className="border-border/60 bg-muted/20 rounded-lg border border-dashed p-6">
                <p className="text-muted-foreground text-sm">
                  Drag and drop your Kenmei export here or click to browse.
                  <Badge variant="outline" className="ml-2 font-mono">
                    .csv
                  </Badge>{" "}
                  files are supported.
                </p>
                <div className="mt-4">
                  <FileDropZone onFileLoaded={onFileLoaded} onError={onError} />
                </div>
              </div>
              <p className="text-muted-foreground text-xs">
                We’ll keep your Kenmei metadata intact and flag any validation
                issues immediately.
              </p>
            </TabsContent>

            <TabsContent value="help" className="space-y-4 pt-6">
              <div className="border-border/60 bg-muted/10 text-muted-foreground rounded-lg border p-6 text-sm leading-relaxed">
                <h3 className="text-foreground mb-3 text-base font-semibold">
                  How to export from Kenmei
                </h3>
                <ol className="ml-4 list-decimal space-y-2">
                  <li>Log into Kenmei and open your dashboard settings.</li>
                  <li>Select the CSV export option.</li>
                  <li>Generate the export and download the file.</li>
                  <li>Return here and upload the downloaded CSV.</li>
                </ol>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </motion.section>
  );
}
Copy