закончено с селектом, работа над дроп зоной на 39д

src/pages/startPage/StartPageSettings.tsx

@@ -1,4 +1,4 @@
-import {Box, Button, FormControl, Link, MenuItem, Select, Typography, useTheme} from "@mui/material";
+import {Box, Button, ButtonBase, FormControl, Link, MenuItem, Select, Typography, useTheme} from "@mui/material";
 import { useState } from "react";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import AlignLeftIcon from "../../assets/icons/AlignLeftIcon";
@@ -16,14 +16,15 @@ import UploadBox from "@ui_kit/UploadBox";
 import CustomTextField from "@ui_kit/CustomTextField";
 import {quizStore} from "@root/quizes";
 import {useParams} from "react-router-dom";
+import * as React from "react";
 
 
 const designTypes = [
-    ["Standard", (color: string) => <LayoutStandartIcon color={color} />],
-    ["Expanded", (color: string) => <LayoutExpandedIcon color={color} />],
-    ["Centered", (color: string) => <LayoutCenteredIcon color={color} />]
+    ["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
+    ["expanded", (color: string) => <LayoutExpandedIcon color={color} />, "Expanded"],
+    ["centered", (color: string) => <LayoutCenteredIcon color={color} />, "Centered"]
 ] as const;
-type DesignType = typeof designTypes[number][0];
+// type DesignType = typeof designTypes[number][0];
 
 type BackgroundType = "image" | "video";
 type AlignType = "left" | "right";
@@ -33,9 +34,30 @@ export default function StartPageSettings() {
     const params = Number(useParams().quizId);
     const theme = useTheme();
     const designType = listQuizes[params].startpage
-    // const [designType, setDesignType] = useState<DesignType | "">(designTypes[0][0]);
     const [backgroundType, setBackgroundType] = useState<BackgroundType>("image");
     const [alignType, setAlignType] = useState<AlignType>("left");
+    //дропзона
+    const imgHC = (imgInp:any) => {
+        const [file] = imgInp.files
+        setImg(URL.createObjectURL(file))
+    }
+    const [img, setImg] = React.useState("");
+
+    const dropZone = React.useRef<any>(null);
+    const [ready, setReady] = React.useState(false);
+
+    const dragenterHC = () => {
+        setReady(true)
+    }
+
+    React.useEffect(() => {
+        if (dropZone.current) {
+            dropZone.current.addEventListener("dragenter", dragenterHC)
+        }
+        return () => {dropZone.current.removeEventListener("dragenter", dragenterHC)}
+    },)
+
+
 
     return (
         <>
@@ -74,9 +96,7 @@ export default function StartPageSettings() {
                             variant="outlined"
                             value={designType}
                             displayEmpty
-                            onChange={(e, i) => console.log(e.target, e.target.value, i)}
-                            // onChange={e => setDesignType(e.target.value as DesignType)}
-                            // onChange={updateQuizesList(params, {startpage: "standard"})}
+                            onChange={e => updateQuizesList(params, {startpage: e.target.value})}
                             sx={{
                                 height: "48px",
                                 borderRadius: "8px",
@@ -133,7 +153,7 @@ export default function StartPageSettings() {
                                     }}
                                 >
                                     {type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
-                                    {type[0]}
+                                    {type[2]}
                                 </MenuItem>
                             )}
                         </Select>
@@ -153,7 +173,38 @@ export default function StartPageSettings() {
                     {backgroundType === "image" ?
                         <>
                             <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Изображение</Typography>
-                            <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
+                            <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
+                                <input onChange={event => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
+                                <Box
+                                    ref={dropZone}
+                                    sx={{
+                                        width: "100%",
+                                        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",
+                                    }}
+
+                                >
+                                    <UploadIcon />
+                                    <Typography sx={{
+                                        position: "absolute",
+                                        right: "10px",
+                                        bottom: "10px",
+                                        color: theme.palette.orange.main,
+                                        fontSize: "16px",
+                                        lineHeight: "19px",
+                                        textDecoration: "underline",
+                                    }}>5 MB максимум</Typography>
+                                </Box>
+
+                                {/*<UploadBox icon={<UploadIcon />} text="5 MB максимум" ref={dropZone} sx={{border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`}}/>*/}
+                            </ButtonBase>
+
                             <Link sx={{
                                 mt: "20px",
                                 fontSize: "16px",

src/ui_kit/UploadBox.tsx

@@ -6,13 +6,16 @@ interface Props {
     sx?: SxProps<Theme>;
     icon: React.ReactNode;
     text?: string;
+    ref?: any;
 }
 
-export default function UploadBox({ sx, icon, text }: Props) {
+export default function UploadBox({ sx, icon, text, ref }: Props) {
     const theme = useTheme();
 
     return (
-        <Box sx={{
+        <Box
+            ref={ref}
+            sx={{
             width: "100%",
             height: "120px",
             position: "relative",