221 lines
11 KiB
TypeScript
221 lines
11 KiB
TypeScript
import {
|
||
Box,
|
||
FormControl,
|
||
FormControlLabel,
|
||
Link,
|
||
Radio,
|
||
RadioGroup,
|
||
TextField,
|
||
Typography,
|
||
useTheme
|
||
} from "@mui/material";
|
||
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
|
||
import React from "react";
|
||
import BannerImg from "../../assets/BannerImg.png"
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
import Dots from "../../assets/dots.png";
|
||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||
import Accordion from "@mui/material/Accordion";
|
||
import AccordionSummary from "@mui/material/AccordionSummary";
|
||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||
import AccordionDetails from "@mui/material/AccordionDetails";
|
||
|
||
|
||
|
||
export default function BannerInstall () {
|
||
const theme = useTheme();
|
||
|
||
const [value, setValue] = React.useState("1");
|
||
|
||
const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
setValue((event.target as HTMLInputElement).value);
|
||
};
|
||
|
||
const [value2, setValue2] = React.useState("1");
|
||
|
||
const handleChangeRadio2 = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
setValue2((event.target as HTMLInputElement).value);
|
||
};
|
||
|
||
const [expanded, setExpanded] = React.useState<string | false>("panel1");
|
||
|
||
const handleChange =
|
||
(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
|
||
setExpanded(isExpanded ? panel : false);
|
||
};
|
||
|
||
return (
|
||
<InstallQzOnSiteParent>
|
||
{/*левая часть*/}
|
||
<Box sx={{maxWidth: '560px'}}>
|
||
|
||
<img src={BannerImg}/>
|
||
<Typography sx={{fontSize: '14px', color: theme.palette.grey2.main}}>
|
||
Если квиз уже установлен на сайт, и вы что-то здесь изменили, код на сайте нужно будет поменять.
|
||
Настройки в этом конструкторе не сохраняются.
|
||
</Typography>
|
||
</Box>
|
||
{/*правая часть*/}
|
||
<Box sx={{display: "flex", flexDirection: "column", }}>
|
||
<Box sx={{display: "flex", flexDirection: "column", gap: "15px"}}>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Текст-призыв</Typography>
|
||
<CustomTextField placeholder={"Пройти тест"}/>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Заголовок квиза</Typography>
|
||
<CustomTextField placeholder={"Заголовок квиза"}/>
|
||
<Box sx={{display: "flex", gap: "10px", alignItems: "center"}}>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Показывать через</Typography>
|
||
<FormControl
|
||
fullWidth
|
||
variant="standard"
|
||
sx={{ p: 0, width: "60px", }}
|
||
>
|
||
<TextField
|
||
fullWidth
|
||
placeholder="20"
|
||
sx={{
|
||
"& .MuiInputBase-root": {
|
||
backgroundColor: theme.palette.background.default,
|
||
height: "48px",
|
||
width: "60px",
|
||
borderRadius: "10px",
|
||
|
||
},
|
||
}}
|
||
inputProps={{
|
||
sx: {
|
||
borderRadius: "10px",
|
||
fontSize: "18px",
|
||
lineHeight: "21px",
|
||
py: 0,
|
||
|
||
}
|
||
}}
|
||
/>
|
||
</FormControl>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>секунд</Typography>
|
||
</Box>
|
||
<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>
|
||
</Box>
|
||
|
||
|
||
<Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} sx={{boxShadow: "none", "&.css-14nk2kd-MuiPaper-root-MuiAccordion-root::before": {display: "none", backgroundColor: "none"}, margin: 0}}>
|
||
<AccordionSummary
|
||
expandIcon={<ExpandMoreIcon />}
|
||
aria-controls="panel1bh-content"
|
||
id="panel1bh-header"
|
||
sx={{"&.css-o4b71y-MuiAccordionSummary-content.Mui-expanded": {margin: 0}}}
|
||
>
|
||
<Typography sx={{padding: '10px 0'}}>Баннер сбоку экрана</Typography>
|
||
</AccordionSummary>
|
||
<AccordionDetails sx={{display: "flex", flexDirection: 'column',}}>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Расположение</Typography>
|
||
<FormControl>
|
||
<RadioGroup
|
||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||
name="controlled-radio-buttons-group"
|
||
value={value}
|
||
onChange={handleChangeRadio}
|
||
sx={{maxWidth: "365px", display: "flex", flexWrap: "wrap", flexDirection: "row"}}
|
||
>
|
||
<FormControlLabel
|
||
sx={{ color: theme.palette.grey2.main }}
|
||
value="1"
|
||
control={<Radio />}
|
||
label="Слева сверху"
|
||
/>
|
||
<FormControlLabel
|
||
sx={{ color: theme.palette.grey2.main }}
|
||
value="2"
|
||
control={<Radio />}
|
||
label="Справа сверху"
|
||
/>
|
||
<FormControlLabel
|
||
sx={{ color: theme.palette.grey2.main }}
|
||
value="3"
|
||
control={<Radio />}
|
||
label="Слева снизу"
|
||
/>
|
||
<FormControlLabel
|
||
sx={{ color: theme.palette.grey2.main }}
|
||
value="4"
|
||
control={<Radio />}
|
||
label="Справа снизу"
|
||
/>
|
||
</RadioGroup>
|
||
</FormControl>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
|
||
<CustomCheckbox label={"Закругленная"}/>
|
||
<CustomCheckbox label={"С тенью"}/>
|
||
<CustomCheckbox label={"С бликом"}/>
|
||
<CustomCheckbox label={'Эффект "пульсация"'}/>
|
||
<CustomCheckbox label={"Отключить на мобильных устройствах"}/>
|
||
</AccordionDetails>
|
||
</Accordion>
|
||
<Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')} sx={{boxShadow: "none", borderTop: '1px solid #9A9AAF', borderBottom: '1px solid #9A9AAF', borderRadius: 0}}>
|
||
<AccordionSummary
|
||
expandIcon={<ExpandMoreIcon />}
|
||
aria-controls="panel2bh-content"
|
||
id="panel2bh-header"
|
||
sx={{margin: 0}}
|
||
>
|
||
<Typography>Баннер на всю ширину экрана</Typography>
|
||
|
||
</AccordionSummary>
|
||
<AccordionDetails sx={{display: "flex", flexDirection: 'column',}}>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Расположение</Typography>
|
||
|
||
<FormControl>
|
||
<RadioGroup
|
||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||
name="controlled-radio-buttons-group"
|
||
value={value2}
|
||
onChange={handleChangeRadio2}
|
||
sx={{maxWidth: "365px", display: "flex", flexWrap: "wrap", flexDirection: "row"}}
|
||
>
|
||
<FormControlLabel
|
||
sx={{ color: theme.palette.grey2.main }}
|
||
value="1"
|
||
control={<Radio />}
|
||
label="Сверху страницы"
|
||
/>
|
||
<FormControlLabel
|
||
sx={{ color: theme.palette.grey2.main }}
|
||
value="2"
|
||
control={<Radio />}
|
||
label="Снизу страницы"
|
||
/>
|
||
</RadioGroup>
|
||
</FormControl>
|
||
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
|
||
<CustomCheckbox label={"С тенью"}/>
|
||
<CustomCheckbox label={"С бликом"}/>
|
||
<CustomCheckbox label={'Эффект "пульсация"'}/>
|
||
<CustomCheckbox label={"Отключить на мобильных устройствах"}/>
|
||
|
||
</AccordionDetails>
|
||
</Accordion>
|
||
<Link
|
||
component='button'
|
||
// onClick={}
|
||
sx={{
|
||
fontSize: "16px",
|
||
lineHeight: "19px",
|
||
color: theme.palette.brightPurple.main,
|
||
textDecorationColor: theme.palette.brightPurple.main,
|
||
textAlign: 'left'
|
||
}}>+ Автооткрытие квиза</Link>
|
||
</Box>
|
||
</InstallQzOnSiteParent>
|
||
)
|
||
} |