feat(components): add image drag-drop support to DragDropContainer

src/components/drag-drop-container.tsx

@@ -1,11 +1,21 @@
 import { ReactNode } from "react";
 import { toast } from "sonner";
 
+const IMAGE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".webp"];
+
+const getFileType = (file: File): "ics" | "image" | null => {
+	const name = file.name.toLowerCase();
+	if (name.endsWith(".ics")) return "ics";
+	if (IMAGE_EXTENSIONS.some((ext) => name.endsWith(ext))) return "image";
+	return null;
+};
+
 interface DragDropContainerProps {
 	children: ReactNode;
 	isDragOver: boolean;
 	setIsDragOver: (isDragOver: boolean) => void;
 	onImport: (file: File) => void;
+	onImageDrop?: (file: File) => void;
 }
 
 export const DragDropContainer = ({
@@ -13,6 +23,7 @@ export const DragDropContainer = ({
 	isDragOver,
 	setIsDragOver,
 	onImport,
+	onImageDrop,
 }: DragDropContainerProps) => {
 	const handleDragOver = (e: React.DragEvent) => {
 		e.preventDefault();
@@ -29,10 +40,14 @@ export const DragDropContainer = ({
 		setIsDragOver(false);
 		if (e.dataTransfer.files?.length) {
 			const file = e.dataTransfer.files[0];
-			if (file.name.endsWith(".ics")) {
+			const fileType = getFileType(file);
+
+			if (fileType === "ics") {
 				onImport(file);
+			} else if (fileType === "image" && onImageDrop) {
+				onImageDrop(file);
 			} else {
-				toast.warning("Please drop an .ics file");
+				toast.warning("Please drop an .ics file or an image");
 			}
 		}
 	};
@@ -48,7 +63,9 @@ export const DragDropContainer = ({
 		>
 			{children}
 			<div className="mt-auto w-full pb-4 text-gray-400">
-				<div className="max-w-fit m-auto">Drag & Drop *.ics here</div>
+				<div className="max-w-fit m-auto">
+					Drag & Drop *.ics or an event screenshot here
+				</div>
 			</div>
 		</div>
 	);