70 lines
3.0 KiB
TypeScript
70 lines
3.0 KiB
TypeScript
|
import React from "react";
|
|||
|
|
import Stepper from '@ui_kit/Stepper';
|
|||
|
|
import Accordion from '@mui/material/Accordion';
|
|||
|
|
import AccordionSummary from '@mui/material/AccordionSummary';
|
|||
|
|
import AccordionDetails from '@mui/material/AccordionDetails';
|
|||
|
|
import {Box, Button, IconButton, Typography, 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";
|
|||
|
|
|
|||
|
|
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>
|
|||
|
|
<Accordion sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0'}}>
|
|||
|
|
<Box sx={{display: 'flex', width: '100%'}}>
|
|||
|
|
<AccordionSummary
|
|||
|
|
expandIcon={<ExpandMoreIcon />}
|
|||
|
|
aria-controls="panel1a-content"
|
|||
|
|
id="panel1a-header"
|
|||
|
|
sx={{width: '100%'}}
|
|||
|
|
>
|
|||
|
|
<CustomTextField placeholder="Заголовок вопроса" text={""}/>
|
|||
|
|
|
|||
|
|
</AccordionSummary>
|
|||
|
|
<Box sx={{display: 'flex', alignItems: 'center', gap: '10px', paddingRight: '20px'}}>
|
|||
|
|
<OneIcon/>
|
|||
|
|
<PointsIcon/>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
<AccordionDetails sx={{display: 'flex', flexDirection: 'column', padding: 0, borderRadius: '12px'}}>
|
|||
|
|
<TypeQuestions/>
|
|||
|
|
<AnswerOptions/>
|
|||
|
|
</AccordionDetails>
|
|||
|
|
</Accordion>
|
|||
|
|
<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>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|