страница вопросов-переключение между типами вопросов + попытка ресайзнуть фавиконки

package-lock.json

@@ -23,6 +23,7 @@
                 "notistack": "^3.0.1",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
+                "react-image-file-resizer": "^0.4.8",
                 "react-router-dom": "^6.6.2",
                 "react-scripts": "5.0.1",
                 "typescript": "^4.4.2",
@@ -14677,6 +14678,11 @@
             "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
             "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
         },
+        "node_modules/react-image-file-resizer": {
+            "version": "0.4.8",
+            "resolved": "https://registry.npmjs.org/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz",
+            "integrity": "sha512-Ue7CfKnSlsfJ//SKzxNMz8avDgDSpWQDOnTKOp/GNRFJv4dO9L5YGHNEnj40peWkXXAK2OK0eRIoXhOYpUzUTQ=="
+        },
         "node_modules/react-is": {
             "version": "18.2.0",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -27992,6 +27998,11 @@
             "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
             "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
         },
+        "react-image-file-resizer": {
+            "version": "0.4.8",
+            "resolved": "https://registry.npmjs.org/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz",
+            "integrity": "sha512-Ue7CfKnSlsfJ//SKzxNMz8avDgDSpWQDOnTKOp/GNRFJv4dO9L5YGHNEnj40peWkXXAK2OK0eRIoXhOYpUzUTQ=="
+        },
         "react-is": {
             "version": "18.2.0",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",

package.json

@@ -18,6 +18,7 @@
         "notistack": "^3.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-image-file-resizer": "^0.4.8",
         "react-router-dom": "^6.6.2",
         "react-scripts": "5.0.1",
         "typescript": "^4.4.2",

src/pages/Questions/QuestionsPage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Stepper from "@ui_kit/Stepper";
-import { Box, Button, IconButton, Typography, Paper, useTheme } from "@mui/material";
+import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import CustomTextField from "@ui_kit/CustomTextField";
 import OneIcon from "../../assets/icons/questionsPage/OneIcon";
@@ -19,6 +19,7 @@ import SliderOptions from "./SliderOptions/SliderOptions";
 import UploadFile from "./UploadFile/UploadFile";
 import PageOptions from "./PageOptions/PageOptions";
 import RatingOptions from "./RatingOptions/RatingOptions";
+import SwitchQuestionsPage from "./SwitchQuestionsPage";
 
 export default function QuestionsPage() {
   const [activeStep, setActiveStep] = React.useState(1);
@@ -31,11 +32,25 @@ export default function QuestionsPage() {
     setActiveStep((prevActiveStep) => prevActiveStep - 1);
   };
 
+    const [switchState, setSwitchState] = React.useState('');
+    const SSHC = (data: string) => {
+        setSwitchState(data)
+    }
+
   const theme = useTheme();
   return (
     <>
       <Stepper activeStep={activeStep} desc={"Задайте вопросы"} />
-      <Typography>Заголовок квиза</Typography>
+      <Box sx={{ maxWidth: "796px", width: "100%", display: "flex", justifyContent: "space-between", margin: "60px 0 40px 0",}}>
+          <Typography variant={"h5"}>Заголовок квиза</Typography>
+          <Link sx={{
+              fontSize: "16px",
+              lineHeight: "19px",
+              color: theme.palette.brightPurple.main,
+              textDecorationColor: theme.palette.brightPurple.main
+          }}>Свернуть всё</Link>
+      </Box>
+
       <Paper sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0" }}>
         <Box
           sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
@@ -49,21 +64,17 @@ export default function QuestionsPage() {
           <PointsIcon />
         </Box>
 
-        <Paper sx={{ display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px" }}>
+        <Box sx={{ display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px" }}>
-          <TypeQuestions />
+            {switchState.length === 0 ?
-          <AnswerOptions />
+            <TypeQuestions switchState={switchState} SSHC={SSHC}/>
-          <OptionsPicture />
+                :
-          <OptionsAndPicture />
+          <SwitchQuestionsPage switchState={switchState}/>}
-          <Emoji />
+        </Box>
-          <OwnTextField />
-          <DropDown />
-          <DataOptions />
-          <SliderOptions />
-          <UploadFile />
-          <PageOptions />
-          <RatingOptions />
-        </Paper>
       </Paper>
+        {/*<Paper sx={{maxWidth: "796px", width: "100%", display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px", marginBottom: "20px" }}>*/}
+        {/*    */}
+        {/*</Paper>*/}
+
       <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
         <IconButton>
           <AddPlus />

src/pages/Questions/SwitchQuestionsPage.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+import AnswerOptions from "./answerOptions/AnswerOptions";
+import OptionsPicture from "./OptionsPicture/OptionsPicture";
+import DataOptions from "./DataOptions/DataOptions";
+import SliderOptions from "./SliderOptions/SliderOptions";
+import OwnTextField from "./OwnTextField/OwnTextField";
+import PageOptions from "./PageOptions/PageOptions";
+import OptionsAndPicture from "./OptionsAndPicture/OptionsAndPicture";
+import RatingOptions from "./RatingOptions/RatingOptions";
+import Emoji from "./Emoji/Emoji";
+import DropDown from "./DropDown/DropDown";
+import UploadFile from "./UploadFile/UploadFile";
+
+interface Props {
+    switchState: string,
+}
+
+export default function SwitchQuestionsPage ({switchState = '' }: Props) {
+    switch (switchState) {
+        case 'answer':
+            return (<AnswerOptions />);
+            break;
+
+        case 'answerpict':
+            return (<OptionsPicture />);
+            break;
+
+        case 'answerandpict':
+            return (<OptionsAndPicture />);
+            break;
+
+        case 'emoji':
+            return (<Emoji />);
+            break;
+
+        case 'textfield':
+            return (<OwnTextField />);
+            break;
+
+        case 'dropdown':
+            return (<DropDown />);
+            break;
+
+        case 'date':
+            return (<DataOptions />);
+            break;
+
+        case 'slider':
+            return (<SliderOptions />);
+            break;
+
+        case 'uploader':
+            return (<UploadFile />);
+            break;
+
+        case 'page':
+            return (<PageOptions />);
+            break;
+
+        case 'rating':
+            return (<RatingOptions />);
+            break;
+
+        default:
+            return (<></>)
+    }
+}

src/pages/Questions/TypeQuestions.tsx

@@ -13,20 +13,83 @@ import RatingIcon from "../../assets/icons/questionsPage/rating";
 import {Box} from "@mui/material";
 import React from "react";
 
-export default function TypeQuestions() {
+interface Props {
+    switchState: string;
+    SSHC: (data: string) => void;
+}
+
+export default function TypeQuestions({ SSHC, switchState }: Props) {
+    const buttonTypeQuestions: { icon: JSX.Element; title: string; value: string }[] = [
+        {
+            icon: <Answer/>,
+            title: 'Варианты ответов',
+            value: 'answer',
+        },
+        {
+            icon: <OptionsPict/>,
+            title: 'Варианты с картинками',
+            value: 'answerpict',
+        },
+        {
+            icon: <OptionsAndPict/>,
+            title: 'Варианты и картинка',
+            value: 'answerandpict',
+        },
+        {
+            icon: <Emoji/>,
+            title: 'Эмоджи',
+            value: 'emoji',
+        },
+        {
+            icon: <Input/>,
+            title: 'Своё поле для ввода',
+            value: 'textfield',
+        },
+        {
+            icon: <DropDown/>,
+            title: 'Выпадающий список',
+            value: 'dropdown',
+        },
+        {
+            icon: <Date/>,
+            title: 'Дата',
+            value: 'date',
+        },
+        {
+            icon: <Slider/>,
+            title: 'Ползунок',
+            value: 'slider',
+        },
+        {
+            icon: <Download/>,
+            title: 'Загрузка файла',
+            value: 'uploader',
+        },
+        {
+            icon: <Page/>,
+            title: 'Страница',
+            value: 'page',
+        },
+        {
+            icon: <RatingIcon/>,
+            title: 'Рейтинг',
+            value: 'rating',
+        },
+    ];
     return (
         <Box sx={{display: 'flex', flexWrap: 'wrap', gap: '20px', padding: '8px 20px 20px'}}>
-            <QuestionsMiniButton icon={<Answer/>} text={'Варианты ответов'}/>
+
-            <QuestionsMiniButton icon={<OptionsPict/>} text={'Варианты с картинками'}/>
+            {buttonTypeQuestions.map(({ icon, title, value }) => (
-            <QuestionsMiniButton icon={<OptionsAndPict/>} text={'Варианты и картинка'}/>
+                <QuestionsMiniButton
-            <QuestionsMiniButton icon={<Emoji/>} text={'Эможди'}/>
+                    key={title}
-            <QuestionsMiniButton icon={<Input/>} text={'Своё поле для ввода'}/>
+                    onClick={() => {
-            <QuestionsMiniButton icon={<DropDown/>} text={'Выпадающий список'}/>
+                        SSHC(value);
-            <QuestionsMiniButton icon={<Date/>} text={'Дата'}/>
+                        console.log(value)
-            <QuestionsMiniButton icon={<Slider/>} text={'Ползунок'}/>
+                    }}
-            <QuestionsMiniButton icon={<Download/>} text={'Загрузка файла'}/>
+                    icon={icon}
-            <QuestionsMiniButton icon={<Page/>} text={'Страница'}/>
+                    text={title}
-            <QuestionsMiniButton icon={<RatingIcon/>} text={'Рейтинг'}/>
+                />
+            ))}
         </Box>
     )
 }

src/pages/startPage/StartPage.tsx

@@ -24,7 +24,7 @@ export default function StartPage() {
 
     const handleBack = () => {
         let result = listQuizes[params].step - 1
-        updateQuizesList(params, {step: result ? result : 1})
+        updateQuizesList(params, {step: result ? result : 0})
     };
 
     return (

src/pages/startPage/StartPageSettings.tsx

@@ -32,7 +32,7 @@ import ModalSizeImage from "./ModalSizeImage";
 import DropZone from "./dropZone";
 import Extra from "./extra";
 import AlignCenterIcon from "@icons/AlignCenterIcon";
-
+import DropFav from "./dropfavicon";
 
 const designTypes = [
     ["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
@@ -353,6 +353,7 @@ export default function StartPageSettings() {
                         gap: "10px",
                     }}>
                         <DropZone sx={{height: "48px", width: "48px"}} heightImg={"48px"} widthImg={"48px"}/>
+
                         <Typography sx={{
                             color: theme.palette.orange.main,
                             fontSize: "16px",
@@ -360,6 +361,7 @@ export default function StartPageSettings() {
                             textDecoration: "underline",
                         }}>5 MB максимум</Typography>
                     </Box>
+                    {/*<DropFav heightImg={"200px"}/>*/}
                 </Box>
                 {/*Правая сторона*/}
                 <Box sx={{

src/pages/startPage/dropfavicon.tsx

@@ -0,0 +1,136 @@
+import { useState } from "react";
+import {Box, ButtonBase, useTheme, Typography, SxProps, Theme} from "@mui/material";
+import UploadIcon from "../../assets/icons/UploadIcon";
+import { SnackbarProvider, enqueueSnackbar } from 'notistack';
+import Resizer from "react-image-file-resizer";
+
+interface Props {
+    text?: string;
+    sx?: SxProps<Theme>;
+    heightImg: string;
+    widthImg?: string
+}
+
+export default ({text, sx, heightImg, widthImg}: Props) => {
+    const theme = useTheme();
+    const callback = (newFileUri:any) => setData(URL.createObjectURL(newFileUri));
+    const resizeImage = (imageFile:any) => {
+        try {
+            Resizer.imageFileResizer(
+                imageFile,
+                150,
+                150,
+                "JPEG",
+                100,
+                0,
+                callback,
+            );
+        } catch (err) {
+            console.log(err);
+        }}
+        const handleImageResize = (imgInp:any) => resizeImage(imgInp.files);
+    const imgHC = (imgInp:any) => {
+        const [file] = imgInp.files
+        if (file.size < 5242880) {
+            setData(URL.createObjectURL(file))
+        } else {enqueueSnackbar('Размер картинки слишком велик')}
+        handleImageResize(file)
+        console.log(file.height)
+    }
+
+
+
+
+    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])
+        if (file.size < 5242880) {
+            setData(URL.createObjectURL(file))
+        } else {enqueueSnackbar('Размер картинки слишком велик')}
+        // try {
+        //     Resizer.imageFileResizer(
+        //         file,
+        //         50,
+        //         50,
+        //         "JPEG",
+        //         100,
+        //         0,
+        //         callback,
+        //     );
+        //
+        // } catch (err) {
+        //     console.log(err);
+        // }
+        //
+    }
+
+    const dragOverHC = (event: any) => {
+        event.preventDefault()
+        // console.log("onDragOver")
+    }
+
+    return (
+        <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
+            <input onChange={event => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
+            <Box
+
+                onDragEnter={dragenterHC}
+                onDragExit={dragexitHC}
+                onDrop={dropHC}
+                onDragOver={dragOverHC}
+
+                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",
+                    opacity: data ? "0.5" : 1,
+                    ...sx
+                }}
+
+            >
+                <UploadIcon />
+                <Typography sx={{
+                    position: "absolute",
+                    right: "10px",
+                    bottom: "10px",
+                    color: theme.palette.orange.main,
+                    fontSize: "16px",
+                    lineHeight: "19px",
+                    textDecoration: "underline",
+                }}>{text}</Typography>
+                <SnackbarProvider style={{backgroundColor: theme.palette.brightPurple.main}}/>
+                {data ?
+                    <img height={heightImg} width={widthImg} src={data}
+                         style={{
+                             position: "absolute", zIndex: "-1",
+                             objectFit: "revert-layer",
+                         }}/>
+                    :
+                    null
+                }
+            </Box>
+        </ButtonBase>
+    )
+}

src/pages/startPage/switchStepPages.tsx

@@ -11,13 +11,13 @@ interface Props {
 export default function SwitchStepPages({activeStep = 1, handleNext }: Props) {
 
     switch (activeStep) {
-        case 1:
+        case 0:
             return (<StepOne handleNext={handleNext}/>);
             break;
-        case 2:
+        case 1:
             return (<Steptwo handleNext={handleNext}/>);
             break
-        case 3:
+        case 2:
             return (<StartPageSettings/>);
             break;
         default:

src/ui_kit/QuestionsMiniButton.tsx

@@ -6,9 +6,10 @@ import { ReactNode } from "react";
 interface QuestionsMiniButtonProps {
     icon: ReactNode;
     text: string;
+    onClick: () => void;
 }
 
-export default function QuestionsMiniButton({ icon, text }: QuestionsMiniButtonProps) {
+export default function QuestionsMiniButton({ icon, text, onClick }: QuestionsMiniButtonProps) {
     const theme = useTheme();
 
     return (
@@ -24,6 +25,7 @@ export default function QuestionsMiniButton({ icon, text }: QuestionsMiniButtonP
                         border: '1px solid #9A9AAF',
                         borderRadius: '8px'
                     }}
+                    onClick={onClick}
             >
                 {icon}
                 <Typography

src/ui_kit/Stepper.tsx

@@ -7,7 +7,7 @@ interface Props {
     steps?: number;
 }
 
-export default function ProgressMobileStepper({desc, activeStep = 1, steps = 6}:Props) {
+export default function ProgressMobileStepper({desc, activeStep = 0, steps = 6}:Props) {
 
   return (
       <Box
@@ -47,7 +47,7 @@ export default function ProgressMobileStepper({desc, activeStep = 1, steps = 6}:
           <Box sx={{padding: '3px 3px 3px 20px'}}>
               <Typography sx={{fontWeight:400,
                   fontSize: '12px',
-                  lineHeight: '14.22px'}}> Шаг {activeStep} из {steps}</Typography>
+                  lineHeight: '14.22px'}}> Шаг {activeStep + 1} из {steps}</Typography>
               <Typography>{desc}</Typography>
           </Box>
     </Box>

yarn.lock

@@ -7820,6 +7820,11 @@
   "resolved" "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   "version" "6.0.11"
 
+"react-image-file-resizer@^0.4.8":
+  "integrity" "sha512-Ue7CfKnSlsfJ//SKzxNMz8avDgDSpWQDOnTKOp/GNRFJv4dO9L5YGHNEnj40peWkXXAK2OK0eRIoXhOYpUzUTQ=="
+  "resolved" "https://registry.npmjs.org/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz"
+  "version" "0.4.8"
+
 "react-is@^16.13.1":
   "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"