41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
|
import { Box, Typography } from "@mui/material";
|
||
|
|
|
||
|
|
import CustomTextField from "@ui_kit/CustomTextField";
|
||
|
|
|
||
|
|
import { useQuizViewStore, updateAnswer } from "@root/quizView";
|
||
|
|
|
||
|
|
import type { QuizQuestionText } from "../../../model/questionTypes/text";
|
||
|
|
|
||
|
|
type TextProps = {
|
||
|
|
currentQuestion: QuizQuestionText;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Text = ({ currentQuestion }: TextProps) => {
|
||
|
|
const { answers } = useQuizViewStore();
|
||
|
|
const answer = answers.find(
|
||
|
|
({ questionId }) => questionId === currentQuestion.content.id
|
||
|
|
)?.answer as string;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<Typography variant="h5">{currentQuestion.title}</Typography>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
width: "100%",
|
||
|
|
marginTop: "20px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<CustomTextField
|
||
|
|
placeholder={currentQuestion.content.placeholder}
|
||
|
|
value={answer || ""}
|
||
|
|
onChange={({ target }) =>
|
||
|
|
updateAnswer(currentQuestion.content.id, target.value)
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|