62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import { useParams } from "react-router-dom";
|
||
|
|
import { Box, Typography, Slider, useTheme } from "@mui/material";
|
||
|
|
|
||
|
|
import CustomTextField from "@ui_kit/CustomTextField";
|
||
|
|
|
||
|
|
import { questionStore, updateQuestionsList } from "@root/questions";
|
||
|
|
|
||
|
|
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
|
||
|
|
|
||
|
|
type NumberProps = {
|
||
|
|
question: QuizQuestionNumber;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Number = ({ question }: NumberProps) => {
|
||
|
|
const [value, setValue] = useState<number>(0);
|
||
|
|
const quizId = window.Number(useParams().quizId);
|
||
|
|
const { listQuestions } = questionStore();
|
||
|
|
const theme = useTheme();
|
||
|
|
const totalIndex = listQuestions[quizId].findIndex(
|
||
|
|
({ id }) => question.id === id
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<Typography variant="h5">{question.title}</Typography>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
width: "100%",
|
||
|
|
marginTop: "20px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<CustomTextField
|
||
|
|
placeholder="0"
|
||
|
|
value={String(value)}
|
||
|
|
sx={{
|
||
|
|
maxWidth: "80px",
|
||
|
|
"& .MuiInputBase-input": {
|
||
|
|
textAlign: "center",
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Slider
|
||
|
|
value={value}
|
||
|
|
min={window.Number(question.content.range.split("—")[0])}
|
||
|
|
max={window.Number(question.content.range.split("—")[1])}
|
||
|
|
sx={{
|
||
|
|
color: theme.palette.brightPurple.main,
|
||
|
|
padding: "0",
|
||
|
|
marginTop: "25px",
|
||
|
|
}}
|
||
|
|
onChange={(_, value) => {
|
||
|
|
setValue(value as number);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|