diff --git a/src/components/FileDropComponent.jsx b/src/components/FileDropComponent.jsx new file mode 100644 index 00000000..4a4c0b17 --- /dev/null +++ b/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 ( +
+
+ ); +}; + diff --git a/src/components/FileDropComponent.module.css b/src/components/FileDropComponent.module.css new file mode 100644 index 00000000..26db7856 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pages/Appearance.jsx b/src/pages/Appearance.jsx index 8691a159..0ed72b4e 100644 --- a/src/pages/Appearance.jsx +++ b/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 (
{t("pageTitles.chooseAppearance")}
+