113 lines
3.1 KiB
TypeScript
113 lines
3.1 KiB
TypeScript
|
import * as React from "react";
|
|||
|
|
import { Box, Modal, Fade, Backdrop, Typography, Button } from "@mui/material";
|
|||
|
|
import theme from "../../../../../theme";
|
|||
|
|
|
|||
|
|
export interface MWProps {
|
|||
|
|
open: boolean
|
|||
|
|
variant: number
|
|||
|
|
close: () => void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ModalMini = ({open, variant, close}: MWProps ) => {
|
|||
|
|
const variants = [ "Количество", "Срок" ];
|
|||
|
|
const units = [ "", "дней" ];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<React.Fragment>
|
|||
|
|
<Modal
|
|||
|
|
aria-labelledby="transition-modal-title"
|
|||
|
|
aria-describedby="transition-modal-description"
|
|||
|
|
open={ open }
|
|||
|
|
onClose={ () => close() }
|
|||
|
|
closeAfterTransition
|
|||
|
|
BackdropComponent={Backdrop}
|
|||
|
|
BackdropProps={{
|
|||
|
|
timeout: 500,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Fade in={open}>
|
|||
|
|
<Box sx={{
|
|||
|
|
position: "absolute" as "absolute",
|
|||
|
|
top: "50%",
|
|||
|
|
left: "50%",
|
|||
|
|
transform: "translate(-50%, -50%)",
|
|||
|
|
width: "30%",
|
|||
|
|
height: "25%",
|
|||
|
|
bgcolor: theme.palette.menu.main,
|
|||
|
|
boxShadow: 24,
|
|||
|
|
color: theme.palette.secondary.main,
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
alignItems: "center",
|
|||
|
|
}}>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
width: "90%"
|
|||
|
|
}}>
|
|||
|
|
<Typography id="transition-modal-title" sx={{
|
|||
|
|
width: "90%",
|
|||
|
|
display: "flex",
|
|||
|
|
justifyContent: "space-between"
|
|||
|
|
}}>
|
|||
|
|
{ variants[ variant ] }:
|
|||
|
|
</Typography>
|
|||
|
|
<Typography sx={{
|
|||
|
|
width: "100%",
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
alignItems: "center"
|
|||
|
|
}}>
|
|||
|
|
5 { units[ variant ] }
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Box sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
width: "90%",
|
|||
|
|
marginTop: "20px"
|
|||
|
|
}}>
|
|||
|
|
<Typography id="transition-modal-title" sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
width: "90%",
|
|||
|
|
justifyContent: "space-between"
|
|||
|
|
}}>
|
|||
|
|
Цена:
|
|||
|
|
</Typography>
|
|||
|
|
<Typography sx={{
|
|||
|
|
width: "100%",
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
alignItems: "center"
|
|||
|
|
}}>
|
|||
|
|
100500 $
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Button
|
|||
|
|
variant = "contained"
|
|||
|
|
onClick={ () => close() }
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: theme.palette.grayDark.main,
|
|||
|
|
marginTop: "30px",
|
|||
|
|
height: "42px",
|
|||
|
|
fontWeight: "normal",
|
|||
|
|
fontSize: "17px",
|
|||
|
|
"&:hover": {
|
|||
|
|
backgroundColor: theme.palette.grayMedium.main
|
|||
|
|
}
|
|||
|
|
}}>
|
|||
|
|
Применить
|
|||
|
|
</Button>
|
|||
|
|
</Box>
|
|||
|
|
</Fade>
|
|||
|
|
</Modal>
|
|||
|
|
</React.Fragment>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default ModalMini;
|