119 lines
3.6 KiB
TypeScript
119 lines
3.6 KiB
TypeScript
import { Box, Button, Typography, useTheme } from "@mui/material";
|
||
import { SettingForm } from "./SettingForm";
|
||
import { DescriptionForm } from "./DescriptionForm/DescriptionForm";
|
||
import { ResultListForm } from "./ResultListForm";
|
||
import CustomWrapper from "@ui_kit/CustomWrapper";
|
||
import Plus from "@icons/Plus";
|
||
import Info from "@icons/Info";
|
||
import IconPlus from "@icons/IconPlus";
|
||
import ArrowLeft from "@icons/questionsPage/arrowLeft";
|
||
import React from "react";
|
||
import { quizStore } from "@root/quizes";
|
||
import { useParams } from "react-router-dom";
|
||
|
||
export const Setting = () => {
|
||
const { listQuizes, updateQuizesList } = quizStore();
|
||
const params = Number(useParams().quizId);
|
||
const handleNext = () => {
|
||
updateQuizesList(params, { step: listQuizes[params].step + 1 });
|
||
};
|
||
const theme = useTheme();
|
||
return (
|
||
<Box sx={{ maxWidth: "796px" }}>
|
||
<Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
|
||
<Typography sx={{ pr: "10px" }} variant="h5">
|
||
Настройки результатов
|
||
</Typography>
|
||
<Info />
|
||
<Button
|
||
disableRipple
|
||
sx={{
|
||
ml: "auto",
|
||
width: "73px",
|
||
height: "19px",
|
||
color: "#7E2AEA",
|
||
textDecoration: "underline",
|
||
fontSize: "16px",
|
||
"&:hover": {
|
||
background: "none",
|
||
textDecoration: "underline",
|
||
},
|
||
}}
|
||
variant="text"
|
||
>
|
||
Свернуть
|
||
</Button>
|
||
</Box>
|
||
<CustomWrapper sx={{ mt: "30px" }} text="Показывать результат" />
|
||
<CustomWrapper sx={{ mt: "30px" }} text="Настройки почты" />
|
||
<Box
|
||
sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}
|
||
>
|
||
<Typography variant="p1" sx={{ color: "#4D4D4D", fontSize: "14px" }}>
|
||
Создайте результат
|
||
</Typography>
|
||
<Button
|
||
disableRipple
|
||
sx={{
|
||
ml: "auto",
|
||
height: "19px",
|
||
color: "#7E2AEA",
|
||
textDecoration: "underline",
|
||
fontSize: "16px",
|
||
|
||
"&:hover": {
|
||
background: "none",
|
||
textDecoration: "underline",
|
||
},
|
||
}}
|
||
variant="text"
|
||
>
|
||
Развернуть все
|
||
</Button>
|
||
</Box>
|
||
<CustomWrapper result={true} text="Показывать результат" />
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
width: "100%",
|
||
alignItems: "center",
|
||
columnGap: "10px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
boxSizing: "border-box",
|
||
width: "100%",
|
||
height: "1px",
|
||
backgroundPosition: "bottom",
|
||
backgroundRepeat: "repeat-x",
|
||
backgroundSize: "20px 1px",
|
||
backgroundImage:
|
||
"radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
|
||
}}
|
||
/>
|
||
<IconPlus />
|
||
</Box>
|
||
<CustomWrapper result={true} text="Настройки почты" />
|
||
<Box sx={{ pt: "30px", display: "flex", alignItems: "center" }}>
|
||
<Plus />
|
||
<Typography component="div" sx={{ ml: "auto" }}>
|
||
<Button
|
||
variant="outlined"
|
||
sx={{ padding: "10px 20px", borderRadius: "8px" }}
|
||
>
|
||
<ArrowLeft />
|
||
</Button>
|
||
<Button variant="contained" sx={{ ml: "10px" }} onClick={handleNext}>
|
||
Настроить форму
|
||
</Button>
|
||
</Typography>
|
||
</Box>
|
||
|
||
<SettingForm />
|
||
<ResultListForm />
|
||
<DescriptionForm />
|
||
</Box>
|
||
);
|
||
};
|