frontPanel/src/pages/Questions/QuestionsPage.tsx

import React from "react";
import Stepper from "@ui_kit/Stepper";
import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from "@mui/material";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";
import QuestionsPageCard from "./QuestionPageCard";
import {questionStore} from "@root/questions";
import QuizCard from "../createQuize/QuizCard";

export default function QuestionsPage() {
    const {listQuizes, updateQuizesList} = quizStore();
    const params = Number(useParams().quizId);
    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
    const activeStep = listQuizes[params].step
    console.log(listQuestions)
    const handleNext = () => {
        updateQuizesList(params, {step: listQuizes[params].step + 1})
    }

    const handleBack = () => {
        let result = listQuizes[params].step - 1
        updateQuizesList(params, {step: result ? result : 1})
    };

    function onDragOver(event: any) {
        event.preventDefault();
    }

    function onDrop(event: any) {
        const id = event
            .dataTransfer
            .getData('text');
        const draggableElement = document.getElementById(id);
        const dropzone = event.target;
        dropzone.appendChild(draggableElement);
        event
            .dataTransfer
            .clearData();
    }


    const theme = useTheme();
  return (
    <>
      {/*<Stepper activeStep={activeStep} desc={"Задайте вопросы"} />*/}
      <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>
        <Box
            onDragOver={onDragOver}
            onDrop={onDrop}
        >
            {Object.values(listQuestions[params]).map((e, index) => (
                    <QuestionsPageCard key={index} totalIndex={index} DeleteClick={() => removeQuestion(params,index)}/>
                )
            )}
        </Box>

      <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
        <IconButton
            onClick={() => {createQuestion(params)
            console.log(listQuestions)
            }}
        >
          <AddPlus />
        </IconButton>
        <Box sx={{ display: "flex", gap: "8px" }}>
          <Button variant="outlined" sx={{ padding: "10px 20px", borderRadius: "8px" }}>
            <ArrowLeft />
          </Button>
          <Button
            variant="contained"
            sx={{
              padding: "10px 20px",
              borderRadius: "8px",
              background: theme.palette.brightPurple.main,
              fontSize: "18px",
            }}
          >
            Следующий шаг
          </Button>
        </Box>
      </Box>
    </>
  );
}