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>
        </>
    )
}