frontPanel/src/pages/Questions/answerOptions/UploadImage.tsx

import {Typography, Box, useTheme, ButtonBase, Modal} from "@mui/material";
import UploadBox from "../../../components/CreateQuiz/UploadBox";
import UploadIcon from "../../../components/icons/UploadIcon";
import * as React from "react";


export default function UploadImage () {
    const theme = useTheme();
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
    return (
        <Box sx={{padding: '20px'}}>
            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Загрузить изображение</Typography>
            <ButtonBase onClick={handleOpen} sx={{width: "100%", maxWidth: "260px"}}>
                <UploadBox sx ={{maxWidth: "260px"}} icon={<UploadIcon />} text="5 MB максимум" />
            </ButtonBase>
            <Modal
                open={open}
                onClose={handleClose}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                <Box sx={{
                    position: 'absolute' as 'absolute',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                    maxWidth: '690px',
                    bgcolor: 'background.paper',
                    borderRadius: '12px',

                    boxShadow: 24,
                    p: 0,}}>
                    <Box
                        sx={{display: 'flex',

                            flexDirection: 'column',
                            padding: '20px',
                            background: theme.palette.background.default,
                        }}
                    >
                        <Typography>Добавьте изображение</Typography>
                        <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
                            <input hidden accept="image/*" multiple type="file" />
                            <Box
                                sx={{
                                    width: '580px',
                                    padding: '33px',
                                    display: "flex",
                                    justifyContent: "space-between",
                                    alignItems: "center",
                                    backgroundColor: theme.palette.background.default,
                                    border: `1px solid ${theme.palette.grey2.main}`,
                                    borderRadius: "8px",
                                }}

                            >
                                <UploadIcon />
                                <Box>
                                    <Typography>Загрузите или перетяните сюда файл</Typography>
                                    <Typography>Принимает JPG, PNG, и GIF формат — максимум 5mb</Typography>
                                </Box>
                            </Box>
                        </ButtonBase>
                        <Typography>Или выберите на фотостоке</Typography>
                    </Box>
                </Box>
            </Modal>
        </Box>
    )
}