Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | import React from "react";
import "./Step4.scss";
import { Box, Button } from "@mui/material";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import { useSelector } from "react-redux";
import AssignmentDetails from "@/app/teacher-page/components/assignments/AssignmentDetails";
import QuestionsList from "@/app/teacher-page/components/assignments/QuestionsList";
import AssignmentSettings from "@/app/teacher-page/components/assignments/AssignmentSettings";
const Step4 = ({ handleBack, stepController }) => {
const { assignmentData } = useSelector((state) => state.TeacherCreateAssignment);
const clickNextStep = () => {
stepController(3, null);
};
return (
<Box
sx={{
mt: 5,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "2%",
}}
>
<Button
id="teacher-class-assignment-step4-back"
sx={{ mt: 5, height: 40 }}
variant="contained"
color="primary"
onClick={handleBack}
>
<ArrowBackIosIcon />
</Button>
<Box sx={{ width: "100%", p: "2%", display: "flex", gap: 3 }}>
<Box sx={{ flex: 1, display: "flex", flexDirection: "column", gap: 2 }}>
<AssignmentSettings isPreviewMode={true} />
<AssignmentDetails assignmentData={assignmentData} />
</Box>
<Box sx={{ flex: 2, overflowWrap: "break-word", wordBreak: "break-word", whiteSpace: "normal" }}>
<QuestionsList assignmentData={assignmentData} />
</Box>
</Box>
<Button
id="teacher-class-assignment-step4-next"
sx={{ mt: 5, height: 40 }}
variant="contained"
onClick={clickNextStep}
>
<ArrowForwardIosIcon />
</Button>
</Box>
);
};
export default Step4;
|