71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
|
import { useParams } from "react-router-dom";
|
||
|
|
import {
|
||
|
|
Box,
|
||
|
|
Typography,
|
||
|
|
Rating as RatingComponent,
|
||
|
|
useTheme,
|
||
|
|
} from "@mui/material";
|
||
|
|
|
||
|
|
import { questionStore, updateQuestionsList } from "@root/questions";
|
||
|
|
|
||
|
|
import StarIconMini from "@icons/questionsPage/StarIconMini";
|
||
|
|
|
||
|
|
import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
|
||
|
|
|
||
|
|
type RatingProps = {
|
||
|
|
question: QuizQuestionRating;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Rating = ({ question }: RatingProps) => {
|
||
|
|
const quizId = Number(useParams().quizId);
|
||
|
|
const { listQuestions } = questionStore();
|
||
|
|
const totalIndex = listQuestions[quizId].findIndex(
|
||
|
|
({ id }) => question.id === id
|
||
|
|
);
|
||
|
|
const theme = useTheme();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<Typography variant="h5">{question.title}</Typography>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
width: "100%",
|
||
|
|
marginTop: "20px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<RatingComponent
|
||
|
|
sx={{ height: "50px" }}
|
||
|
|
max={question.content.steps}
|
||
|
|
icon={
|
||
|
|
<StarIconMini
|
||
|
|
color={theme.palette.brightPurple.main}
|
||
|
|
width={50}
|
||
|
|
sx={{ transform: "scale(0.8)" }}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
emptyIcon={
|
||
|
|
<StarIconMini
|
||
|
|
color={theme.palette.grey2.main}
|
||
|
|
width={50}
|
||
|
|
sx={{ transform: "scale(0.8)" }}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
maxWidth: `${question.content.steps * 50}px`,
|
||
|
|
color: theme.palette.grey2.main,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography>{question.content.ratingNegativeDescription}</Typography>
|
||
|
|
<Typography>{question.content.ratingPositiveDescription}</Typography>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|