improve questions preview

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx

@@ -9,21 +9,21 @@ interface Props {
 
 export default function File({ question }: Props) {
     const fileInputRef = useRef<HTMLInputElement>(null);
-    const [files, setFiles] = useState<File[] | null>(null);
+    const [file, setFile] = useState<File | null>(null);
 
     function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
-        if (!event.target.files) return setFiles(null);
+        if (!event.target.files?.[0]) return setFile(null);
-        setFiles(Array.from(event.target.files));
+        setFile(event.target.files[0]);
     }
 
     return (
         <Box sx={{
             display: "flex",
             flexDirection: "column",
+            alignItems: "start",
             gap: 1,
         }}>
             <Typography variant="h6">{question.title}</Typography>
-            <Box>
             <Button
                 variant="contained"
                 onClick={() => fileInputRef.current?.click()}
@@ -38,7 +38,7 @@ export default function File({ question }: Props) {
                     }}
                 />
             </Button>
-            </Box>
+            {file && <Typography>Выбран файл: {file.name}</Typography>}
         </Box>
     );
 }

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx

@@ -53,6 +53,7 @@ export default function Images({ question }: Props) {
                             borderColor: selectedVariants.includes(index) ? theme.palette.brightPurple.main : "#E3E3E3",
                         }}
                     >
+                        {variant.extendedText ?
                             <img
                                 src={variant.extendedText}
                                 alt="question variant"
@@ -63,6 +64,9 @@ export default function Images({ question }: Props) {
                                     flexGrow: 1,
                                 }}
                             />
+                            :
+                            <Typography p={2}>Картинка отсутствует</Typography>
+                        }
                         <Divider sx={{ width: "100%" }} />
                         <Box sx={{
                             display: "flex",

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx

@@ -12,12 +12,23 @@ export default function Page({ question }: Props) {
         <Box sx={{
             display: "flex",
             flexDirection: "column",
+            alignItems: "start",
             gap: 1,
         }}>
             <Typography variant="h6">{question.title}</Typography>
-            <Box>
             <Typography>{question.content.text}</Typography>
-            </Box>
+            {question.content.picture &&
+                <img
+                    src={question.content.picture}
+                    alt=""
+                    style={{
+                        width: "100%",
+                        display: "block",
+                        objectFit: "scale-down",
+                        flexGrow: 1,
+                    }}
+                />
+            }
         </Box>
     );
 }

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx

@@ -55,8 +55,6 @@ export default function Varimg({ question }: Props) {
             <Box sx={{
                 border: "1px solid #E3E3E3",
                 maxWidth: "400px",
-                minWidth: "200px",
-                minHeight: "150px",
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
@@ -64,7 +62,7 @@ export default function Varimg({ question }: Props) {
             }}>
                 {currentVariant?.extendedText ?
                     <img
-                        src={currentVariant?.extendedText}
+                        src={currentVariant.extendedText}
                         alt="question variant"
                         style={{
                             width: "100%",
@@ -74,7 +72,7 @@ export default function Varimg({ question }: Props) {
                         }}
                     />
                     :
-                    <Typography>Выберите вариант</Typography>
+                    <Typography p={2}>{selectedVariantIndex === -1 ? "Выберите вариант" : "Картинка отсутствует"}</Typography>
                 }
             </Box>
         </Box>