frontPanel/src/pages/Questions/QuestionsPage.tsx

import React from "react";
import Stepper from "@ui_kit/Stepper";
import { Box, Button, IconButton, Typography, Paper, useTheme } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "../../components/icons/questionsPage/OneIcon";
import PointsIcon from "../../components/icons/questionsPage/PointsIcon";
import AddPlus from "../../components/icons/questionsPage/addPlus";
import ArrowLeft from "../../components/icons/questionsPage/arrowLeft";
import TypeQuestions from "./TypeQuestions";
import AnswerOptions from "./answerOptions/AnswerOptions";
import OptionsPicture from "./OptionsPicture/OptionsPicture";
import OptionsAndPicture from "./OptionsAndPicture/OptionsAndPicture";
import Emoji from "./Emoji/Emoji";
import OwnTextField from "./OwnTextField/OwnTextField";
import DropDown from "./DropDown/DropDown";
import DataOptions from "./DataOptions/DataOptions";
import SliderOptions from "./SliderOptions/SliderOptions";
import UploadFile from "./UploadFile/UploadFile";
import PageOptions from "./PageOptions/PageOptions";
import RatingOptions from "./RatingOptions/RatingOptions";

export default function QuestionsPage() {
  const [activeStep, setActiveStep] = React.useState(1);

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const theme = useTheme();
  return (
    <>
      <Stepper activeStep={activeStep} desc={"Задайте вопросы"} />
      <Typography>Заголовок квиза</Typography>
      <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" }}
        >
          <CustomTextField placeholder="Заголовок вопроса" text={""} />
          <IconButton>
            {" "}
            <ExpandMoreIcon />{" "}
          </IconButton>
          <OneIcon />
          <PointsIcon />
        </Box>

        <Paper sx={{ display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px" }}>
          <TypeQuestions />
          <AnswerOptions />
          <OptionsPicture />
          <OptionsAndPicture />
          <Emoji />
          <OwnTextField />
          <DropDown />
          <DataOptions />
          <SliderOptions />
          <UploadFile />
          <PageOptions />
          <RatingOptions />
        </Paper>
      </Paper>
      <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
        <IconButton>
          <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>
    </>
  );
}