52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { Box, Typography, Button, useTheme } from "@mui/material";
|
||
import { useParams } from "react-router-dom";
|
||
|
||
import { Graph } from "./graph";
|
||
|
||
import { quizStore } from "@root/quizes";
|
||
|
||
import ArrowLeft from "@icons/questionsPage/arrowLeft";
|
||
|
||
export const QuestionsMap = () => {
|
||
const { listQuizes, updateQuizesList } = quizStore();
|
||
const quizId = Number(useParams().quizId);
|
||
const quize = listQuizes[quizId];
|
||
const theme = useTheme();
|
||
|
||
return (
|
||
<Box>
|
||
<Typography variant="h5" sx={{ marginTop: "50px" }}>
|
||
Карта вопросов
|
||
</Typography>
|
||
<Graph />
|
||
<Box sx={{ display: "flex", gap: "8px", marginTop: "25px" }}>
|
||
<Button
|
||
variant="outlined"
|
||
sx={{
|
||
padding: "10px 20px",
|
||
borderRadius: "8px",
|
||
height: "44px",
|
||
marginLeft: "auto",
|
||
}}
|
||
onClick={() => updateQuizesList(quizId, { step: quize.step - 1 })}
|
||
>
|
||
<ArrowLeft />
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
sx={{
|
||
height: "44px",
|
||
padding: "10px 20px",
|
||
borderRadius: "8px",
|
||
background: theme.palette.brightPurple.main,
|
||
fontSize: "18px",
|
||
}}
|
||
onClick={() => updateQuizesList(quizId, { step: quize.step + 1 })}
|
||
>
|
||
Следующий шаг
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|