diff --git a/src/components/drag-drop-container.tsx b/src/components/drag-drop-container.tsx index 8b98ff1..1383fb0 100644 --- a/src/components/drag-drop-container.tsx +++ b/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}
-
Drag & Drop *.ics here
+
+ Drag & Drop *.ics or an event screenshot here +
);