54 lines
2.1 KiB
TypeScript
Executable File
54 lines
2.1 KiB
TypeScript
Executable File
import {Box, Button, Typography} from "@mui/material";
|
||
import CardWithImage from "./CardWithImage";
|
||
import cardImage1 from "../../assets/card-1.png";
|
||
import cardImage2 from "../../assets/card-2.png";
|
||
import cardImage3 from "../../assets/card-3.png";
|
||
import {quizStore} from "@root/quizes";
|
||
import {useParams} from "react-router-dom";
|
||
|
||
interface HandleNext {
|
||
handleNext: () => void
|
||
}
|
||
|
||
export default function Steptwo ({handleNext}:HandleNext) {
|
||
const params = Number(useParams().quizId);
|
||
const {listQuizes, updateQuizesList} = quizStore()
|
||
return (
|
||
<Box sx={{
|
||
mt: "60px",
|
||
}}>
|
||
<Typography variant="h5">Стартовая страница</Typography>
|
||
|
||
<Box sx={{
|
||
display: "flex",
|
||
gap: "3.4%",
|
||
mt: "40px",
|
||
}}>
|
||
<Button variant='text'
|
||
onClick={() => {
|
||
updateQuizesList(params, {startpage: "standard"})
|
||
handleNext()
|
||
}}
|
||
>
|
||
<CardWithImage image={cardImage1} text="Standard" border={listQuizes[params].startpage === "standard" ? "1px solid #7E2AEA" : "none"} />
|
||
</Button>
|
||
<Button variant='text'
|
||
onClick={() => {
|
||
updateQuizesList(params, {startpage: "expanded"})
|
||
handleNext()
|
||
}}
|
||
>
|
||
<CardWithImage image={cardImage2} text="Expanded" border={listQuizes[params].startpage === "expanded" ? "1px solid #7E2AEA" : "none"}/>
|
||
</Button>
|
||
<Button variant='text'
|
||
onClick={() => {
|
||
updateQuizesList(params, {startpage: "centered"})
|
||
handleNext()
|
||
}}
|
||
>
|
||
<CardWithImage image={cardImage3} text="Centered" border={listQuizes[params].startpage === "centered" ? "1px solid #7E2AEA" : "none"}/>
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
)
|
||
} |