78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { useRef, useState } from "react";
|
|
|
|
import { UploadCloud } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { cn } from "@/lib/utils";
|
|
|
|
|
|
interface ImageUploadAreaProps {
|
|
onFilesSelected: (files: FileList | null) => void;
|
|
}
|
|
|
|
|
|
export function UploadArea() {
|
|
|
|
const [isDraggingOver, setIsDraggingOver] = useState(false);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
onFilesSelected(e.target.files);
|
|
if (e.target) e.target.value = "";
|
|
};
|
|
|
|
const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
setIsDraggingOver(true);
|
|
};
|
|
|
|
const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
setIsDraggingOver(false);
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
setIsDraggingOver(false);
|
|
onFilesSelected(e.dataTransfer.files);
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
<Card>
|
|
<CardContent className="py-2">
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-medium">Upload Images</h3>
|
|
|
|
<div
|
|
className={cn(
|
|
"w-full h-48 rounded-lg border-2 border-dashed flex flex-col items-center justify-center relative transition-colors cursor-pointer hover:border-primary/60",
|
|
isDraggingOver ? "border-primary bg-accent" : "border-input"
|
|
)}
|
|
onDragOver={handleDragOver}
|
|
onDragLeave={handleDragLeave}
|
|
onDrop={handleDrop}
|
|
onClick={() => fileInputRef.current?.click()}
|
|
>
|
|
<div className="flex flex-col items-center justify-center text-center text-muted-foreground">
|
|
<p className="font-semibold">Click or drag & drop to upload</p>
|
|
<p className="text-xs text-muted-foreground mt-1">PNG, JPG, WEBP are supported</p>
|
|
</div>
|
|
<div>
|
|
<Button variant="outline" className="mt-2">
|
|
Select File
|
|
</Button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
|
|
|
|
)
|
|
} |