2023-10-18 13:41:34 +00:00
|
|
|
|
import {
|
2023-12-31 02:53:25 +00:00
|
|
|
|
Box,
|
|
|
|
|
Button,
|
|
|
|
|
Typography,
|
|
|
|
|
useMediaQuery,
|
|
|
|
|
useTheme,
|
2023-10-18 13:41:34 +00:00
|
|
|
|
} from "@mui/material";
|
2023-11-13 18:04:51 +00:00
|
|
|
|
import { setQuizStartpageType } from "@root/quizes/actions";
|
|
|
|
|
import { useCurrentQuiz } from "@root/quizes/hooks";
|
2023-03-03 23:54:19 +00:00
|
|
|
|
import cardImage1 from "../../assets/card-1.png";
|
|
|
|
|
import cardImage2 from "../../assets/card-2.png";
|
|
|
|
|
import cardImage3 from "../../assets/card-3.png";
|
2023-11-13 18:04:51 +00:00
|
|
|
|
import CardWithImage from "./CardWithImage";
|
2024-01-16 10:10:38 +00:00
|
|
|
|
import { useRef, useState, useEffect } from "react";
|
|
|
|
|
|
|
|
|
|
import arrowLeftIcon from "../../assets/icons/arrow_left.svg";
|
|
|
|
|
import arrowRightIcon from "../../assets/icons/arrow_right.svg";
|
2023-11-13 18:04:51 +00:00
|
|
|
|
|
2023-10-18 13:41:34 +00:00
|
|
|
|
export default function Steptwo() {
|
2024-01-16 10:10:38 +00:00
|
|
|
|
const quiz = useCurrentQuiz();
|
|
|
|
|
const config = quiz?.config;
|
2023-12-31 02:53:25 +00:00
|
|
|
|
const theme = useTheme();
|
|
|
|
|
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1300));
|
2024-01-16 10:10:38 +00:00
|
|
|
|
const isSlider = useMediaQuery(theme.breakpoints.down(1250));
|
2023-11-13 18:04:51 +00:00
|
|
|
|
|
2024-01-16 10:10:38 +00:00
|
|
|
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
|
const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
|
|
|
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (containerRef.current && buttonRefs.current.length > 0) {
|
|
|
|
|
const buttonWidth = buttonRefs.current[0]!.offsetWidth;
|
|
|
|
|
|
|
|
|
|
containerRef.current.scrollTo({
|
|
|
|
|
left: currentIndex * buttonWidth,
|
|
|
|
|
behavior: "smooth",
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, [currentIndex]);
|
|
|
|
|
|
|
|
|
|
const handlePrevClick = () => {
|
|
|
|
|
setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleNextClick = () => {
|
|
|
|
|
setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, 2));
|
|
|
|
|
};
|
2023-11-13 18:04:51 +00:00
|
|
|
|
|
2023-12-31 02:53:25 +00:00
|
|
|
|
if (!config) return null;
|
2023-03-03 23:54:19 +00:00
|
|
|
|
|
2023-12-31 02:53:25 +00:00
|
|
|
|
return (
|
|
|
|
|
<Box sx={{ mt: "60px" }}>
|
|
|
|
|
<Typography variant="h5">Стартовая страница</Typography>
|
|
|
|
|
<Box
|
|
|
|
|
sx={{
|
|
|
|
|
overflowX: "scroll",
|
|
|
|
|
paddingBottom: "15px",
|
|
|
|
|
"&::-webkit-scrollbar": { width: 0 },
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Box
|
2024-01-16 10:10:38 +00:00
|
|
|
|
ref={containerRef}
|
2023-12-31 02:53:25 +00:00
|
|
|
|
sx={{
|
2024-01-16 10:10:38 +00:00
|
|
|
|
overflow: "auto",
|
2023-12-31 02:53:25 +00:00
|
|
|
|
display: "flex",
|
|
|
|
|
gap: "20px",
|
|
|
|
|
mt: "40px",
|
2024-01-16 10:10:38 +00:00
|
|
|
|
position: "relative",
|
2023-12-31 02:53:25 +00:00
|
|
|
|
padding: isSmallMonitor ? "0 15px 15px" : 0,
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Button
|
2024-01-16 10:10:38 +00:00
|
|
|
|
sx={{ minWidth: "325px" }}
|
|
|
|
|
ref={(ref) => (buttonRefs.current[0] = ref as HTMLButtonElement)}
|
2023-12-31 02:53:25 +00:00
|
|
|
|
variant="text"
|
|
|
|
|
data-cy="select-quiz-layout-standard"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setQuizStartpageType(quiz.id, "standard");
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<CardWithImage
|
|
|
|
|
image={cardImage1}
|
|
|
|
|
text="Standard"
|
|
|
|
|
border={
|
|
|
|
|
config.startpageType === "standard"
|
|
|
|
|
? "1px solid #7E2AEA"
|
|
|
|
|
: "none"
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</Button>
|
|
|
|
|
<Button
|
2024-01-16 10:10:38 +00:00
|
|
|
|
sx={{ minWidth: "325px" }}
|
|
|
|
|
ref={(ref) => (buttonRefs.current[1] = ref as HTMLButtonElement)}
|
2023-12-31 02:53:25 +00:00
|
|
|
|
variant="text"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setQuizStartpageType(quiz.id, "expanded");
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<CardWithImage
|
|
|
|
|
image={cardImage2}
|
|
|
|
|
text="Expanded"
|
|
|
|
|
border={
|
|
|
|
|
config.startpageType === "expanded"
|
|
|
|
|
? "1px solid #7E2AEA"
|
|
|
|
|
: "none"
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</Button>
|
|
|
|
|
<Button
|
2024-01-16 10:10:38 +00:00
|
|
|
|
sx={{ minWidth: "325px" }}
|
|
|
|
|
ref={(ref) => (buttonRefs.current[2] = ref as HTMLButtonElement)}
|
2023-12-31 02:53:25 +00:00
|
|
|
|
variant="text"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setQuizStartpageType(quiz.id, "centered");
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<CardWithImage
|
|
|
|
|
image={cardImage3}
|
|
|
|
|
text="Centered"
|
|
|
|
|
border={
|
|
|
|
|
config.startpageType === "centered"
|
|
|
|
|
? "1px solid #7E2AEA"
|
|
|
|
|
: "none"
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</Button>
|
2023-03-03 23:54:19 +00:00
|
|
|
|
</Box>
|
2024-01-16 10:10:38 +00:00
|
|
|
|
{isSlider && (
|
|
|
|
|
<>
|
|
|
|
|
<img
|
|
|
|
|
onClick={handlePrevClick}
|
|
|
|
|
style={{
|
|
|
|
|
position: "absolute",
|
|
|
|
|
left: "0",
|
2024-01-16 10:12:59 +00:00
|
|
|
|
top: "55%",
|
2024-01-16 10:10:38 +00:00
|
|
|
|
width: "40px",
|
|
|
|
|
height: "40px",
|
|
|
|
|
}}
|
|
|
|
|
src={arrowLeftIcon}
|
|
|
|
|
/>
|
|
|
|
|
<img
|
|
|
|
|
onClick={handleNextClick}
|
|
|
|
|
style={{
|
|
|
|
|
position: "absolute",
|
|
|
|
|
right: "0",
|
2024-01-16 10:12:59 +00:00
|
|
|
|
top: "55%",
|
2024-01-16 10:10:38 +00:00
|
|
|
|
width: "40px",
|
|
|
|
|
height: "40px",
|
|
|
|
|
}}
|
|
|
|
|
src={arrowRightIcon}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
2023-12-31 02:53:25 +00:00
|
|
|
|
</Box>
|
|
|
|
|
</Box>
|
|
|
|
|
);
|
2023-10-18 13:41:34 +00:00
|
|
|
|
}
|