50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
import type { Component } from 'solid-js';
|
|
import { UploadCloud } from 'lucide-solid';
|
|
|
|
interface FileUploadProps {
|
|
onFileSelect: (text: string) => void;
|
|
}
|
|
|
|
const FileUpload: Component<FileUploadProps> = (props) => {
|
|
const handleFileChange = (e: Event) => {
|
|
const input = e.target as HTMLInputElement;
|
|
const file = input.files?.[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
const text = event.target?.result as string;
|
|
props.onFileSelect(text);
|
|
};
|
|
reader.readAsText(file);
|
|
};
|
|
|
|
return (
|
|
<div class="flex items-center justify-center w-full">
|
|
<label
|
|
for="dropzone-file"
|
|
class="flex flex-col items-center justify-center w-full h-48 border-2 border-primary/20 border-dashed rounded-[2rem] cursor-pointer bg-muted/30 hover:bg-primary/5 transition-all group shadow-inner"
|
|
>
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
|
<div class="p-4 bg-card rounded-2xl shadow-premium mb-4 group-hover:scale-110 transition-transform duration-500">
|
|
<UploadCloud class="w-10 h-10 text-primary" />
|
|
</div>
|
|
<p class="mb-2 text-sm text-foreground font-black tracking-tight">
|
|
<span class="text-primary underline underline-offset-4 decoration-2">Click to upload</span> or drag and drop
|
|
</p>
|
|
<p class="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em]">CSV files only</p>
|
|
</div>
|
|
<input
|
|
id="dropzone-file"
|
|
type="file"
|
|
class="hidden"
|
|
accept=".csv"
|
|
onChange={handleFileChange}
|
|
/>
|
|
</label>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FileUpload;
|