214 lines
6.7 KiB
TypeScript
214 lines
6.7 KiB
TypeScript
import {
|
||
Box,
|
||
Button,
|
||
FormControl,
|
||
MenuItem,
|
||
Modal,
|
||
Select,
|
||
SelectChangeEvent,
|
||
TextField,
|
||
Typography,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import * as React from "react";
|
||
import ArrowDown from "@icons/ArrowDownIcon";
|
||
import { useState } from "react";
|
||
|
||
export default function PointsQuestions() {
|
||
const theme = useTheme();
|
||
const [open, setOpen] = useState(false);
|
||
const handleOpen = () => setOpen(true);
|
||
const handleClose = () => setOpen(false);
|
||
|
||
const [display, setDisplay] = React.useState("1");
|
||
const handleChange = (event: SelectChangeEvent) => {
|
||
setDisplay(event.target.value);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Button onClick={handleOpen}>открыть</Button>
|
||
<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: "620px",
|
||
width: "100%",
|
||
bgcolor: "background.paper",
|
||
borderRadius: "12px",
|
||
boxShadow: 24,
|
||
p: 0,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "30px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
gap: "20px",
|
||
alignItems: "center",
|
||
}}
|
||
>
|
||
<Typography sx={{ mb: "14px" }}>Показать, если количество баллов</Typography>
|
||
<Box sx={{ display: "flex" }}>
|
||
<FormControl
|
||
fullWidth
|
||
size="small"
|
||
sx={{
|
||
width: "282px",
|
||
maxWidth: "140px",
|
||
height: "48px",
|
||
}}
|
||
>
|
||
<Select
|
||
id="display-select"
|
||
variant="outlined"
|
||
value={display}
|
||
displayEmpty
|
||
onChange={handleChange}
|
||
sx={{
|
||
width: "282px",
|
||
height: "48px",
|
||
borderRadius: "8px",
|
||
"& .MuiOutlinedInput-notchedOutline": {
|
||
border: `1px solid ${theme.palette.brightPurple.main} !important`,
|
||
},
|
||
}}
|
||
MenuProps={{
|
||
PaperProps: {
|
||
sx: {
|
||
mt: "8px",
|
||
p: "4px",
|
||
borderRadius: "8px",
|
||
border: "1px solid #EEE4FC",
|
||
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
|
||
},
|
||
},
|
||
MenuListProps: {
|
||
sx: {
|
||
py: 0,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "8px",
|
||
"& .Mui-selected": {
|
||
backgroundColor: theme.palette.background.default,
|
||
color: theme.palette.brightPurple.main,
|
||
},
|
||
},
|
||
},
|
||
}}
|
||
inputProps={{
|
||
sx: {
|
||
color: theme.palette.brightPurple.main,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
px: "9px",
|
||
gap: "20px",
|
||
},
|
||
}}
|
||
IconComponent={(props) => <ArrowDown {...props} />}
|
||
>
|
||
<MenuItem
|
||
value={1}
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "20px",
|
||
p: "4px",
|
||
borderRadius: "5px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
Больше
|
||
</MenuItem>
|
||
<MenuItem
|
||
value={2}
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "20px",
|
||
p: "4px",
|
||
borderRadius: "5px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
Меньше
|
||
</MenuItem>
|
||
<MenuItem
|
||
value={3}
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "20px",
|
||
p: "4px",
|
||
borderRadius: "5px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
Между
|
||
</MenuItem>
|
||
<MenuItem
|
||
value={4}
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "20px",
|
||
p: "4px",
|
||
borderRadius: "5px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
Ровно
|
||
</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
<TextField
|
||
placeholder="100"
|
||
fullWidth
|
||
sx={{
|
||
ml: "160px",
|
||
"& .MuiInputBase-root": {
|
||
backgroundColor: "#F2F3F7",
|
||
width: "282px",
|
||
height: "48px",
|
||
borderRadius: "10px",
|
||
},
|
||
}}
|
||
inputProps={{
|
||
sx: {
|
||
borderRadius: "10px",
|
||
fontSize: "18px",
|
||
lineHeight: "21px",
|
||
py: 0,
|
||
},
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
|
||
<Button
|
||
onClick={() => handleClose()}
|
||
variant="contained">
|
||
Готово
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</Modal>
|
||
</>
|
||
);
|
||
}
|