148 lines
6.0 KiB
TypeScript
148 lines
6.0 KiB
TypeScript
import {
|
||
Button,
|
||
Modal,
|
||
Box,
|
||
useTheme,
|
||
Typography,
|
||
Table,
|
||
TableCell,
|
||
TableBody,
|
||
TableContainer,
|
||
TableRow,
|
||
} from "@mui/material";
|
||
import * as React from "react";
|
||
import {useState} from "react";
|
||
|
||
export default function ModalSizeImage () {
|
||
const theme = useTheme();
|
||
const [open, setOpen] = useState(false);
|
||
const handleOpen = () => setOpen(true);
|
||
const handleClose = () => setOpen(false);
|
||
|
||
function createData(
|
||
name: string,
|
||
size: string
|
||
) {
|
||
return { name, size };
|
||
}
|
||
|
||
const rows = [
|
||
createData('Прямая ссылка/домен', "1792х1509 px"),
|
||
createData('Модальное окно', "1380х1300 px"),
|
||
createData('Во ВКонтакте', "1166х1200 px"),
|
||
createData('Версия для планшета', "767х220 px"),
|
||
createData('Мобильная версия', "400х220 px"),
|
||
createData('Картинка для дизайна Centered', "900х490 px"),
|
||
createData('Картинка для дизайна Expanded', "1920х1080 px"),
|
||
];
|
||
|
||
const rows2 = [
|
||
createData('Вертикальный вариант', "180х240 px"),
|
||
createData('Квадратные', "240х240 px"),
|
||
createData('Варианты и картинка', "380х307 px"),
|
||
createData('Консультант', "140х140 px"),
|
||
createData('Логотип', "107х37 px"),
|
||
createData('Результаты',"1100х600 px"),
|
||
createData('Бонус', "200х60 px"),
|
||
createData('Картинка для формата вопроса "Страница"', "860х1250 px"),
|
||
];
|
||
|
||
return (
|
||
<>
|
||
<Button
|
||
sx={{
|
||
mt: "20px",
|
||
fontSize: "16px",
|
||
lineHeight: "19px",
|
||
color: theme.palette.orange.main,
|
||
textDecorationColor: theme.palette.orange.main
|
||
}}
|
||
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: "540px",
|
||
width: "100%",
|
||
minHeight: "632px",
|
||
bgcolor: "background.paper",
|
||
borderRadius: "12px",
|
||
boxShadow: 24,
|
||
p: 0,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
backgroundColor: theme.palette.background.default,
|
||
padding: "20px",
|
||
borderRadius: "12px 12px 0px 0px"
|
||
}}>
|
||
<Typography>Размеры картинок</Typography>
|
||
<Button>x</Button>
|
||
</Box>
|
||
<Box sx={{padding: "15px 20px 30px"}}>
|
||
<Box><Typography>Рекомендованный размер зависит от того, как вы будете чаще использовать квиз:</Typography></Box>
|
||
<Box>
|
||
<TableContainer component={Box}>
|
||
<Table sx={{ minWidth: 500 }} size="small" aria-label="a dense table">
|
||
<TableBody>
|
||
{rows2.map((row) => (
|
||
<TableRow
|
||
key={row.name}
|
||
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||
>
|
||
<TableCell component="th" scope="row">
|
||
{row.name}
|
||
</TableCell>
|
||
<TableCell align="right">{row.size}</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
backgroundColor: theme.palette.background.default,
|
||
padding: "20px"
|
||
}}
|
||
>
|
||
<Typography>Размеры изображений в квизе</Typography>
|
||
</Box>
|
||
<TableContainer component={Box}>
|
||
<Table sx={{ minWidth: 500 }} size="small" aria-label="a dense table">
|
||
<TableBody>
|
||
{rows.map((row) => (
|
||
<TableRow
|
||
key={row.name}
|
||
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||
>
|
||
<TableCell component="th" scope="row">
|
||
{row.name}
|
||
</TableCell>
|
||
<TableCell align="right">{row.size}</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
</Box>
|
||
</Modal>
|
||
</>
|
||
|
||
);
|
||
} |