[dyad] Refactoring the app for modularity - wrote 12 file(s)

src/components/image-upload-area.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Upload } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Card, CardContent } from "./ui/card";
+
+interface ImageUploadAreaProps {
+  onFilesSelected: (files: FileList | null) => void;
+}
+
+export function ImageUploadArea({ onFilesSelected }: ImageUploadAreaProps) {
+  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="pt-6">
+        <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 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">
+              <Upload className="w-8 h-8 mb-2" />
+              <p className="font-semibold">Click or drag and drop to upload</p>
+              <p className="text-xs text-muted-foreground mt-1">PNG, JPG, WEBP supported</p>
+            </div>
+            <Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}