import { useState } from "react"; import { useParams } from "react-router-dom"; import { Box, Typography, RadioGroup, FormControlLabel, Radio, useTheme, } from "@mui/material"; import { questionStore } from "@root/questions"; import RadioCheck from "@ui_kit/RadioCheck"; import RadioIcon from "@ui_kit/RadioIcon"; import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg"; type VarimgProps = { question: QuizQuestionVarImg; }; export const Varimg = ({ question }: VarimgProps) => { const [valueIndex, setValueIndex] = useState(-1); const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const theme = useTheme(); const totalIndex = listQuestions[quizId].findIndex( ({ id }) => question.id === id ); return ( {question.title} setValueIndex(Number(target.value))} sx={{ display: "flex", flexWrap: "wrap", flexDirection: "row", justifyContent: "space-between", flexBasis: "100%", marginTop: "20px", }} > {question.content.variants.map(({ id, answer }, index) => ( } icon={} /> } label={answer} /> ))} {(question.content.variants[valueIndex]?.extendedText || question.content.back) && ( = 0 ? question.content.variants[valueIndex].extendedText : question.content.back } style={{ width: "100%", height: "100%", objectFit: "cover" }} alt="" /> )} ); };