improve questions preview

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx

@@ -9,36 +9,36 @@ 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
-                <Button
+                variant="contained"
-                    variant="contained"
+                onClick={() => fileInputRef.current?.click()}
-                    onClick={() => fileInputRef.current?.click()}
+            >
-                >
+                Загрузить файл
-                    Загрузить файл
+                <input
-                    <input
+                    ref={fileInputRef}
-                        ref={fileInputRef}
+                    onChange={handleFileChange}
-                        onChange={handleFileChange}
+                    type="file"
-                        type="file"
+                    style={{
-                        style={{
+                        display: "none",
-                            display: "none",
+                    }}
-                        }}
+                />
-                    />
+            </Button>
-                </Button>
+            {file && <Typography>Выбран файл: {file.name}</Typography>}
-            </Box>
         </Box>
     );
 }

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx

@@ -53,16 +53,20 @@ export default function Images({ question }: Props) {
                             borderColor: selectedVariants.includes(index) ? theme.palette.brightPurple.main : "#E3E3E3",
                         }}
                     >
-                        <img
+                        {variant.extendedText ?
-                            src={variant.extendedText}
+                            <img
-                            alt="question variant"
+                                src={variant.extendedText}
-                            style={{
+                                alt="question variant"
-                                width: "100%",
+                                style={{
-                                display: "block",
+                                    width: "100%",
-                                objectFit: "scale-down",
+                                    display: "block",
-                                flexGrow: 1,
+                                    objectFit: "scale-down",
-                            }}
+                                    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>
-                <Typography>{question.content.text}</Typography>
+            {question.content.picture &&
-            </Box>
+                <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>