From 08032fe445ab254ce79b556a0980eeb576089db5 Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Wed, 21 Jun 2023 05:38:13 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=20=D0=B4=D1=80=D0=BE=D0=BF=20=D0=B7=D0=BE=D0=BD?=
 =?UTF-8?q?=D1=8B=20=D0=BD=D0=B0=20react=20=D1=81=D0=BB=D1=83=D1=88=D0=B0?=
 =?UTF-8?q?=D1=82=D0=B5=D0=BB=D1=8F=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/startPage/StartPageSettings.tsx |  2 +
 src/pages/startPage/dropZone.tsx          | 83 +++++++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 src/pages/startPage/dropZone.tsx

diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx
index 8bf5a1fa..40d01ea2 100755
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@@ -29,6 +29,7 @@ import {quizStore} from "@root/quizes";
 import {useParams} from "react-router-dom";
 import * as React from "react";
 import ModalSizeImage from "./ModalSizeImage";
+import DropZone from "./dropZone";
 
 
 const designTypes = [
@@ -245,6 +246,7 @@ export default function StartPageSettings() {
 
     return (
         <>
+        <DropZone/>
             <Typography variant="h5" sx={{marginTop: "60px"}}>Стартовая страница</Typography>
             <Box sx={{
                 backgroundColor: "white",
diff --git a/src/pages/startPage/dropZone.tsx b/src/pages/startPage/dropZone.tsx
new file mode 100644
index 00000000..b08ae1ff
--- /dev/null
+++ b/src/pages/startPage/dropZone.tsx
@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { Box, ButtonBase, useTheme,Typography } from "@mui/material";
+import UploadIcon from "../../assets/icons/UploadIcon";
+
+//Научи функцию принимать данные для валидации
+export default () => {
+    const theme = useTheme();
+
+    const [data, setData] = useState("")
+    const [ready, setReady] = useState(false);
+
+    const dragenterHC = () => {
+        // console.log("onDragEnter")
+        setReady(true)
+    }
+
+    const dragexitHC = () => {
+        // console.log("onDragExit")
+        setReady(false)
+    }
+
+    const dropHC = (event: any) => {
+        event.preventDefault()
+        // console.log("onDrop")
+        setReady(false)
+
+        const file = event.dataTransfer.files[0]
+        console.log(event.dataTransfer.files[0])
+        setData(URL.createObjectURL(file))
+    }
+
+    const dragOverHC = (event: any) => {
+        event.preventDefault()
+        // console.log("onDragOver")
+    }
+
+    return (
+        <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
+            <input hidden accept="image/*" multiple type="file" />
+            <Box
+
+                onDragEnter={dragenterHC}
+                onDragExit={dragexitHC}
+                onDrop={dropHC}
+                onDragOver={dragOverHC}
+
+                sx={{
+                    width: "120px",
+                    height: "120px",
+                    position: "relative",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    backgroundColor: theme.palette.background.default,
+                    border: `1px solid ${ready? "red" : theme.palette.grey2.main}`,
+                    borderRadius: "8px",
+                    opacity: data ? "0.5" : 1
+                }}
+
+            >
+                <UploadIcon />
+                <Typography sx={{
+                    position: "absolute",
+                    right: "10px",
+                    bottom: "10px",
+                    color: theme.palette.orange.main,
+                    fontSize: "16px",
+                    lineHeight: "19px",
+                    textDecoration: "underline",
+                }}>5 MB максимум</Typography>
+                {data ?
+                    <img height="110" src={data}
+                            style={{
+                                position: "absolute", zIndex: "-1",
+                        objectFit: "revert-layer",
+                    }}/>
+                    :
+                    null
+                }
+            </Box>
+        </ButtonBase>
+    )
+}
\ No newline at end of file