File Upload

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { X, Code2, FileText, Upload } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function FileUploadSection() {
29  const [files, setFiles] = useState<string[]>([]);
30  const [dragOver, setDragOver] = useState(false);
31
32  const handleDrop = () => {
33    setFiles((p) => [...p, `document_${p.length + 1}.pdf`]);
34    setDragOver(false);
35  };
36
37  return (
38    <SectionCard title="File Upload" sourceSlug="/ui/source/ui-elements/file-upload">
39      <div className="max-w-lg space-y-4">
40        {/* Drop Zone */}
41        <div
42          onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
43          onDragLeave={() => setDragOver(false)}
44          onDrop={(e) => { e.preventDefault(); handleDrop(); }}
45          onClick={handleDrop}
46          className={`flex cursor-pointer flex-col items-center rounded-xl border-2 border-dashed p-8 text-center transition-colors ${dragOver ? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10' : 'border-gray-300 bg-gray-50 hover:border-brand-400 hover:bg-brand-50/50 dark:border-white/10 dark:bg-white/5 dark:hover:border-brand-400 dark:hover:bg-brand-500/5'}`}
47        >
48          <Upload className={`size-10 ${dragOver ? 'text-brand-500' : 'text-gray-400'}`} />
49          <p className="mt-3 text-sm font-medium text-gray-700 dark:text-gray-300">
50            {dragOver ? 'Drop files here' : 'Drag & drop files here'}
51          </p>
52          <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">or click to browse (PDF, DOC, JPG up to 10MB)</p>
53        </div>
54        {/* File List */}
55        {files.length > 0 && (
56          <div className="space-y-2">
57            {files.map((file, i) => (
58              <div key={i} className="flex items-center justify-between rounded-lg border border-gray-200 px-3 py-2 dark:border-white/5">
59                <div className="flex items-center gap-2">
60                  <FileText className="size-4 text-brand-500" />
61                  <span className="text-sm text-gray-700 dark:text-gray-300">{file}</span>
62                </div>
63                <button onClick={() => setFiles((p) => p.filter((_, j) => j !== i))} className="text-gray-400 hover:text-error-500 transition-colors">
64                  <X className="size-4" />
65                </button>
66              </div>
67            ))}
68          </div>
69        )}
70      </div>
71    </SectionCard>
72  );
73}