100 lines
3.5 KiB
TypeScript
Executable File
100 lines
3.5 KiB
TypeScript
Executable File
import {
|
||
Box,
|
||
Button,
|
||
Typography,
|
||
useMediaQuery,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import { setQuizStartpageType } from "@root/quizes/actions";
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
import { useNavigate } from "react-router-dom";
|
||
import cardImage1 from "../../assets/card-1.png";
|
||
import cardImage2 from "../../assets/card-2.png";
|
||
import cardImage3 from "../../assets/card-3.png";
|
||
import CardWithImage from "./CardWithImage";
|
||
|
||
|
||
export default function Steptwo() {
|
||
const navigate = useNavigate();
|
||
const theme = useTheme();
|
||
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1300));
|
||
const { quiz } = useCurrentQuiz();
|
||
|
||
const config = quiz?.config;
|
||
|
||
if (!config) return null; // TODO throw and catch with error boundary
|
||
|
||
return (
|
||
<Box sx={{ mt: "60px" }}>
|
||
<Typography variant="h5">Стартовая страница</Typography>
|
||
<Box
|
||
sx={{
|
||
overflowX: "scroll",
|
||
paddingBottom: "15px",
|
||
"&::-webkit-scrollbar": { width: 0 },
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
minWidth: "950px",
|
||
display: "flex",
|
||
gap: "20px",
|
||
mt: "40px",
|
||
padding: isSmallMonitor ? "0 15px 15px" : 0,
|
||
}}
|
||
>
|
||
<Button
|
||
variant="text"
|
||
data-cy="select-quiz-layout-standard"
|
||
onClick={() => {
|
||
setQuizStartpageType(quiz.id, "standard", navigate);
|
||
}}
|
||
>
|
||
<CardWithImage
|
||
image={cardImage1}
|
||
text="Standard"
|
||
border={
|
||
config.startpageType === "standard"
|
||
? "1px solid #7E2AEA"
|
||
: "none"
|
||
}
|
||
/>
|
||
</Button>
|
||
<Button
|
||
variant="text"
|
||
onClick={() => {
|
||
setQuizStartpageType(quiz.id, "expanded", navigate);
|
||
}}
|
||
>
|
||
<CardWithImage
|
||
image={cardImage2}
|
||
text="Expanded"
|
||
border={
|
||
config.startpageType === "expanded"
|
||
? "1px solid #7E2AEA"
|
||
: "none"
|
||
}
|
||
/>
|
||
</Button>
|
||
<Button
|
||
variant="text"
|
||
onClick={() => {
|
||
setQuizStartpageType(quiz.id, "centered", navigate);
|
||
}}
|
||
>
|
||
<CardWithImage
|
||
image={cardImage3}
|
||
text="Centered"
|
||
border={
|
||
config.startpageType === "centered"
|
||
? "1px solid #7E2AEA"
|
||
: "none"
|
||
}
|
||
/>
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|