add drag and drop component

src/components/FileDropComponent.jsx

@@ -0,0 +1,49 @@
+// FileDropComponent.js
+import React, { useEffect, useState } from 'react';
+import styles from './FileDropComponent.module.css';
+
+export default function FileDropComponent ({onFileDrop}){
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    const handleDrop = (event) => {
+      event.preventDefault();
+      setIsDragging(false);
+      console.log(onFileDrop);
+      const file = event.dataTransfer.files[0];
+      console.log('Dropped file:', file);
+      if (onFileDrop) {
+        onFileDrop(file);
+      }
+    };
+
+    const handleDragOver = (event) => {
+      event.preventDefault();
+      setIsDragging(true);
+    };
+
+    // Attach event listeners to the window
+    window.addEventListener('drop', handleDrop);
+    window.addEventListener('dragover', handleDragOver);
+
+    // Clean up event listeners on component unmount
+    return () => {
+      window.removeEventListener('drop', handleDrop);
+      window.removeEventListener('dragover', handleDragOver);
+    };
+  }, []);
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  return (
+    <div
+      onDragLeave={handleDragLeave}
+      className={styles.dropArea}
+      style={{ display: isDragging ? 'flex': 'none' }}
+    >
+    </div>
+  );
+};
+

src/components/FileDropComponent.module.css

@@ -0,0 +1,13 @@
+.dropArea {
+    height: 100vh;
+    width: 100vw;
+    border: '2px dashed #aaa';
+    background-size: cover;
+    text-align: 'center';
+    display: fixed;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+    position: absolute;
+    z-index: 10000;
+}

src/pages/Appearance.jsx

@@ -7,6 +7,7 @@ import CustomButton from "../components/custom-button"
 import { LanguageContext } from "../context/LanguageContext"
 import { SoundContext } from "../context/SoundContext"
 import { AudioContext } from "../context/AudioContext"
+import FileDropComponent from "../components/FileDropComponent"
 
 function Appearance({
   animationManager,
@@ -75,12 +76,20 @@ function Appearance({
   // Translate hook
   const { t } = useContext(LanguageContext)
 
+  const handleFileDrop = (file) => {
+    // Handle the dropped file as needed
+    console.log('Handling dropped file:', file);
+  };
+
   return (
     <div className={styles.container}>
       <div className={`loadingIndicator ${isLoading ? "active" : ""}`}>
         <img className={"rotate"} src="ui/loading.svg" />
       </div>
       <div className={"sectionTitle"}>{t("pageTitles.chooseAppearance")}</div>
+      <FileDropComponent 
+         onFileDrop={handleFileDrop}
+      />
       <Editor
         animationManager={animationManager}
         blinkManager={blinkManager}