мини-модалки - на ревью
This commit is contained in:
parent
e0a8ef1d76
commit
0cf9066868
@ -1,5 +1,5 @@
|
||||
import * as React from "react";
|
||||
import { Box, Modal, Fade, Backdrop, Typography, Button } from "@mui/material";
|
||||
import { Box, Modal, Fade, Backdrop, Typography, Button, TextField } from "@mui/material";
|
||||
import theme from "../../../../../theme";
|
||||
|
||||
export interface MWProps {
|
||||
@ -9,7 +9,7 @@ export interface MWProps {
|
||||
}
|
||||
|
||||
const ModalMini = ({open, variant, close}: MWProps ) => {
|
||||
const variants = [ "Количество", "Срок" ];
|
||||
const variants = [ "Количество", "Срок (дней)" ];
|
||||
const units = [ "", "дней" ];
|
||||
|
||||
return (
|
||||
@ -41,50 +41,40 @@ const ModalMini = ({open, variant, close}: MWProps ) => {
|
||||
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>
|
||||
<TextField
|
||||
id = "standard-basic"
|
||||
label = { variants[ variant ] }
|
||||
variant = "filled"
|
||||
color = "secondary"
|
||||
sx = {{ width: "80%" }}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
} }}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
} }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id = "standard-basic"
|
||||
label = "Цена"
|
||||
variant = "filled"
|
||||
color = "secondary"
|
||||
sx = {{ width: "80%", marginTop: "5px" }}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
} }}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
} }}
|
||||
/>
|
||||
|
||||
<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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user