125 lines
6.6 KiB
TypeScript
125 lines
6.6 KiB
TypeScript
import {Box, Button, Link, Typography, useTheme} from "@mui/material";
|
||
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
|
||
import Dots from "../../assets/dots.png";
|
||
import React from "react";
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||
|
||
|
||
export default function InBodyInstall () {
|
||
const theme = useTheme();
|
||
return (
|
||
<InstallQzOnSiteParent>
|
||
{/*левая часть*/}
|
||
<Box sx={{maxWidth: '560px'}}>
|
||
{/*бокс с кнопкой*/}
|
||
<Box
|
||
sx={{
|
||
border: '1.5px solid #9A9AAF',
|
||
borderRadius: '6px',
|
||
maxWidth: '560px',
|
||
height: '364px',
|
||
// height: '100%'
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{background: theme.palette.background.default,
|
||
borderBottom: '1.5px solid #9A9AAF',
|
||
borderRadius: '6px 6px 0px 0px',
|
||
minHeight: '34px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'end',
|
||
paddingRight: '10px'
|
||
}}
|
||
> <img src={Dots}/>
|
||
</Box>
|
||
<Box
|
||
sx={{display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
gap: "40px",
|
||
height: "100%"
|
||
}}
|
||
>
|
||
<Box sx={{display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
width: "100%",
|
||
maxWidth: "413px",
|
||
minHeight: "133px",
|
||
background: "#EEE4FC",
|
||
borderRadius: "6px",
|
||
border: "1px dashed #7E2AEA"
|
||
}}>
|
||
<Typography sx={{color: theme.palette.brightPurple.main, maxWidth: "365px"}}>
|
||
Квиз будет открыть прямо в том месте, где вы установите код на сайте
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography sx={{maxWidth: "414px", fontSize: "14px"}}>В мобильной версии будет показана кнопка, открывающая квиз в модальном окне</Typography>
|
||
</Box>
|
||
</Box>
|
||
<Typography sx={{fontSize: '14px', color: theme.palette.grey2.main}}>Если квиз уже установлен на сайт, и вы что-то здесь изменили,
|
||
код на сайте нужно будет поменять. Настройки в этом конструкторе не сохраняются.
|
||
</Typography>
|
||
</Box>
|
||
|
||
{/*правая часть*/}
|
||
<Box sx={{display: "flex", flexDirection: "column", gap: "15px"}}>
|
||
<Typography>1. Задайте размеры (опционально)</Typography>
|
||
<Box sx={{display: "flex", gap: "40px"}}>
|
||
<Box sx={{display: "flex", flexDirection: "column", gap: "20px"}}>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Ширина (px)</Typography>
|
||
<CustomTextField placeholder={"auto"}/>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Радиус (px)</Typography>
|
||
<CustomTextField placeholder={"0"}/>
|
||
</Box>
|
||
<Box sx={{display: "flex", flexDirection: "column", gap: "20px"}}>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Высота (px)</Typography>
|
||
<CustomTextField placeholder={"auto"}/>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Отступ (px)</Typography>
|
||
<CustomTextField placeholder={"0"}/>
|
||
</Box>
|
||
</Box>
|
||
<Box sx={{display: "flex", flexDirection: "column", gap: "15px"}}>
|
||
<Typography>
|
||
2. Настройте кнопку для мобильной версии
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
gap: '40px'
|
||
}}
|
||
>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Цвет кнопки</Typography>
|
||
<Box sx={{width: "20px", height: "20px", borderRadius: "50%", backgroundColor: theme.palette.brightPurple.main, border: "1px solid #4D4D4D"}}> </Box>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Цвет текста кнопки</Typography>
|
||
<Box sx={{width: "20px", height: "20px", borderRadius: "50%", backgroundColor: "#ffffff", border: "1px solid #4D4D4D"}}> </Box>
|
||
</Box>
|
||
<CustomCheckbox label={'Отключить на мобильных устройствах'}/>
|
||
<CustomCheckbox label={'Закругленная'}/>
|
||
<CustomCheckbox label={'С тенью'}/>
|
||
<CustomCheckbox label={'С бликом'}/>
|
||
<CustomCheckbox label={'Кнопка на мобильной версии'}/>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>
|
||
Текст кнопки
|
||
</Typography>
|
||
<CustomTextField placeholder={"Пройти тест"}/>
|
||
<Link
|
||
component='button'
|
||
// onClick={}
|
||
sx={{
|
||
fontSize: "16px",
|
||
lineHeight: "19px",
|
||
color: theme.palette.brightPurple.main,
|
||
textDecorationColor: theme.palette.brightPurple.main,
|
||
textAlign: 'left'
|
||
}}>+ Автооткрытие квиза</Link>
|
||
</Box>
|
||
</Box>
|
||
</InstallQzOnSiteParent>
|
||
|
||
)
|
||
} |