кастомный аккордион и мелкие правки по пректу
This commit is contained in:
Tamara
parent
b39577d191
commit
837be801ea
@ -9,7 +9,7 @@ export default function ExpandIcon({ isExpanded }: Props) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none">
|
||||
<svg style={{ transform: isExpanded ? "rotate(180deg)" : undefined }} xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none">
|
||||
<path d="M16 28.7949C22.6274 28.7949 28 23.4223 28 16.7949C28 10.1675 22.6274 4.79492 16 4.79492C9.37258 4.79492 4 10.1675 4 16.7949C4 23.4223 9.37258 28.7949 16 28.7949Z" stroke={isExpanded ? theme.palette.orange.main : theme.palette.brightPurple.main} strokeWidth="2" strokeMiterlimit="10" />
|
||||
<path d="M20.5 15.2949L16 20.2949L11.5 15.2949" stroke={isExpanded ? theme.palette.orange.main : theme.palette.brightPurple.main} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
|
||||
@ -16,8 +16,8 @@ export default function ArrowLeft() {
|
||||
}}
|
||||
>
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.75 12H4.25" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11 5.25L4.25 12L11 18.75" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20.75 12H4.25" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M11 5.25L4.25 12L11 18.75" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
|
||||
</Box>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { IconButton, useTheme } from "@mui/material";
|
||||
import SectionWrapper from "../SectionWrapper";
|
||||
import MenuIcon from "@mui/icons-material/Menu";
|
||||
import PenaLogo from "../PenaLogo";
|
||||
import PenaLogo from "@ui_kit/PenaLogo";
|
||||
|
||||
|
||||
interface Props {
|
||||
|
||||
@ -3,7 +3,7 @@ import CustomButton from "../CustomButton";
|
||||
import BackArrowIcon from "../../assets/icons/BackArrowIcon";
|
||||
import EyeIcon from "../../assets/icons/EyeIcon";
|
||||
import NavMenuItem from "../NavMenuItem";
|
||||
import PenaLogo from "../PenaLogo";
|
||||
import PenaLogo from "@ui_kit/PenaLogo";
|
||||
import CustomAvatar from "./Avatar";
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {Box, FormControl, TextField, Typography, useTheme} from "@mui/material";
|
||||
import {Box, Checkbox, FormControl, FormControlLabel, TextField, Typography, useTheme} from "@mui/material";
|
||||
import Dots from "../../assets/dots.png";
|
||||
import React from "react";
|
||||
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
|
||||
@ -7,6 +7,17 @@ import InfoIcon from "../../assets/icons/InfoIcon";
|
||||
|
||||
export default function AutoOpenInstall () {
|
||||
const theme = useTheme();
|
||||
|
||||
const [checked, setChecked] = React.useState([true, false]);
|
||||
|
||||
const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setChecked([event.target.checked, checked[1]]);
|
||||
};
|
||||
|
||||
const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setChecked([checked[0], event.target.checked, ]);
|
||||
};
|
||||
|
||||
return (
|
||||
<InstallQzOnSiteParent>
|
||||
{/*левая часть*/}
|
||||
@ -18,7 +29,6 @@ export default function AutoOpenInstall () {
|
||||
borderRadius: '6px',
|
||||
maxWidth: '560px',
|
||||
height: '364px',
|
||||
// height: '100%'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -66,59 +76,70 @@ export default function AutoOpenInstall () {
|
||||
{/*правая часть*/}
|
||||
<Box sx={{display: "flex", flexDirection: "column", gap: "15px"}}>
|
||||
<Box sx={{display: "flex", alignItems: "center"}}>
|
||||
<CustomCheckbox label={"Автооткрытие квиза"}/>
|
||||
<CustomCheckbox label={"Автооткрытие квиза"} checked={checked[0]} handleChange={handleChange1}/>
|
||||
<InfoIcon/>
|
||||
</Box>
|
||||
<Box sx={{display: "flex", alignItems: "center"}}>
|
||||
<CustomCheckbox label={"Открывать квиз при попытке уйти с сайта"}/>
|
||||
<Box sx={{display: "flex", alignItems: "center"}} >
|
||||
<CustomCheckbox label={"Открывать квиз при попытке уйти с сайта"} checked={checked[1]} handleChange={handleChange2}/>
|
||||
<InfoIcon/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Box sx={{padding: "15px 0", display: "flex", gap: "10px", alignItems: "center", borderTop: "1px solid #9A9AAF"}}>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Показывать через</Typography>
|
||||
<FormControl
|
||||
fullWidth
|
||||
variant="standard"
|
||||
sx={{ p: 0, width: "60px", }}
|
||||
>
|
||||
<TextField
|
||||
{checked[0] ?
|
||||
<Box>
|
||||
<Box sx={{padding: "15px 0", display: "flex", gap: "10px", alignItems: "center", borderTop: "1px solid #9A9AAF"}}>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Показывать через</Typography>
|
||||
<FormControl
|
||||
fullWidth
|
||||
placeholder="10"
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "48px",
|
||||
width: "60px",
|
||||
borderRadius: "10px",
|
||||
variant="standard"
|
||||
sx={{ p: 0, width: "60px", }}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="10"
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "48px",
|
||||
width: "60px",
|
||||
borderRadius: "10px",
|
||||
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>секунд</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: "flex", flexDirection: "column", }}>
|
||||
<CustomCheckbox label={"Открывать каждый раз"}/>
|
||||
<CustomCheckbox label={"Отключать автооткрытие на мобильных устройствах"}/>
|
||||
</Box>
|
||||
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>секунд</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: "flex", flexDirection: "column", }}>
|
||||
:
|
||||
<></>
|
||||
}
|
||||
|
||||
{checked[1] ?
|
||||
<Box sx={{
|
||||
borderTop: "1px solid #9A9AAF",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: "15px 0"
|
||||
}}>
|
||||
<CustomCheckbox label={"Открывать каждый раз"}/>
|
||||
<CustomCheckbox label={"Отключать автооткрытие на мобильных устройствах"}/>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
<Box sx={{ borderTop: "1px solid #9A9AAF", display: "flex", flexDirection: "column", padding: "15px 0"}}>
|
||||
<CustomCheckbox label={"Открывать каждый раз"}/>
|
||||
<CustomCheckbox label={"Отключать автооткрытие на мобильных устройствах"}/>
|
||||
</Box>
|
||||
|
||||
:
|
||||
<></>
|
||||
}
|
||||
</Box>
|
||||
</InstallQzOnSiteParent>
|
||||
)
|
||||
|
||||
@ -10,20 +10,16 @@ import {
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
|
||||
import React from "react";
|
||||
import React, {useState} 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";
|
||||
import RadioCheck from "@ui_kit/RadioCheck";
|
||||
import RadioIcon from "@ui_kit/RadioIcon";
|
||||
import AccordMy from "@ui_kit/Accordion";
|
||||
|
||||
|
||||
|
||||
type isExpanded = "panel1" | "panel2"
|
||||
export default function BannerInstall () {
|
||||
const theme = useTheme();
|
||||
|
||||
@ -39,12 +35,7 @@ export default function BannerInstall () {
|
||||
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);
|
||||
};
|
||||
const [isExpanded, setIsExpanded] = useState<isExpanded>("panel1");
|
||||
|
||||
return (
|
||||
<InstallQzOnSiteParent>
|
||||
@ -109,26 +100,18 @@ export default function BannerInstall () {
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<AccordMy header={"Баннер сбоку экрана"} isExpanded={isExpanded === "panel1"} onClick={() => setIsExpanded("panel1")} sx={{display: "flex", flexDirection: 'column',}}>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Расположение</Typography>
|
||||
<FormControl>
|
||||
|
||||
<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"}}
|
||||
>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||||
name="controlled-radio-buttons-group"
|
||||
value={value}
|
||||
onChange={handleChangeRadio}
|
||||
sx={{maxWidth: "380px", display: "flex", flexWrap: "wrap", flexDirection: "row", paddingLeft: "5px", justifyContent: "space-between"}}
|
||||
>
|
||||
<Box sx={{display: "flex", flexDirection: "column"}}>
|
||||
<FormControlLabel
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
value="1"
|
||||
@ -141,6 +124,8 @@ export default function BannerInstall () {
|
||||
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
|
||||
label="Справа сверху"
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{display: "flex", flexDirection: "column"}}>
|
||||
<FormControlLabel
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
value="3"
|
||||
@ -153,60 +138,50 @@ export default function BannerInstall () {
|
||||
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
|
||||
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>
|
||||
</Box>
|
||||
|
||||
</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 checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
|
||||
label="Сверху страницы"
|
||||
/>
|
||||
<FormControlLabel
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
value="2"
|
||||
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
|
||||
label="Снизу страницы"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
|
||||
<CustomCheckbox label={"Закругленная"}/>
|
||||
<CustomCheckbox label={"С тенью"}/>
|
||||
<CustomCheckbox label={"С бликом"}/>
|
||||
<CustomCheckbox label={'Эффект "пульсация"'}/>
|
||||
<CustomCheckbox label={"Отключить на мобильных устройствах"}/>
|
||||
</AccordMy>
|
||||
<AccordMy header={"Баннер на всю ширину экрана"} isExpanded={isExpanded === "panel2"} onClick={() => setIsExpanded("panel2")} sx={{display: "flex", flexDirection: 'column',}}>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Расположение</Typography>
|
||||
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
|
||||
<CustomCheckbox label={"С тенью"}/>
|
||||
<CustomCheckbox label={"С бликом"}/>
|
||||
<CustomCheckbox label={'Эффект "пульсация"'}/>
|
||||
<CustomCheckbox label={"Отключить на мобильных устройствах"}/>
|
||||
<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", paddingLeft: "5px",}}
|
||||
>
|
||||
<FormControlLabel
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
value="1"
|
||||
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
|
||||
label="Сверху страницы"
|
||||
/>
|
||||
<FormControlLabel
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
value="2"
|
||||
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
|
||||
label="Снизу страницы"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
|
||||
<CustomCheckbox label={"С тенью"}/>
|
||||
<CustomCheckbox label={"С бликом"}/>
|
||||
<CustomCheckbox label={'Эффект "пульсация"'}/>
|
||||
<CustomCheckbox label={"Отключить на мобильных устройствах"}/>
|
||||
</AccordMy>
|
||||
<Link
|
||||
component='button'
|
||||
// onClick={}
|
||||
@ -215,7 +190,8 @@ export default function BannerInstall () {
|
||||
lineHeight: "19px",
|
||||
color: theme.palette.brightPurple.main,
|
||||
textDecorationColor: theme.palette.brightPurple.main,
|
||||
textAlign: 'left'
|
||||
textAlign: 'left',
|
||||
padding: "15px 0",
|
||||
}}>+ Автооткрытие квиза</Link>
|
||||
</Box>
|
||||
</InstallQzOnSiteParent>
|
||||
|
||||
@ -34,6 +34,7 @@ import BannerInstall from "./BannerInstall";
|
||||
import InBodyInstall from "./InBodyInstall";
|
||||
import AutoOpenInstall from "./AutoOpenInstall";
|
||||
import VidjetInstall from "./VidjetInstall";
|
||||
import InstallQzCode from "./InstallQzCode";
|
||||
|
||||
type BackgroundType = "text" | "video";
|
||||
|
||||
@ -312,11 +313,12 @@ export default function InstallQuiz() {
|
||||
<InBodyInstall/>
|
||||
<AutoOpenInstall/>
|
||||
<VidjetInstall/>
|
||||
<InstallQzCode/>
|
||||
<Box sx={{display: 'flex', gap: '8px', justifyContent: 'end', mt: '30px'}}>
|
||||
<Button variant='outlined' sx={{padding: '10px 20px', borderRadius: '8px'}}>
|
||||
<ArrowLeft/>
|
||||
</Button>
|
||||
<Button variant='contained' sx={{padding: '10px 20px', borderRadius: '8px', background: theme.palette.brightPurple.main, fontSize: '18px'}}>
|
||||
<Button variant='contained'>
|
||||
Запустить рекламу
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
129
src/pages/InstallQuiz/InstallQzCode.tsx
Normal file
129
src/pages/InstallQuiz/InstallQzCode.tsx
Normal file
@ -0,0 +1,129 @@
|
||||
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
|
||||
import {
|
||||
Box, Button,
|
||||
FormControl,
|
||||
IconButton,
|
||||
InputAdornment, Link,
|
||||
OutlinedInput,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
import CopyIcon from "@icons/CopyIcon";
|
||||
import React from "react";
|
||||
import InfoIcon from "@icons/InfoIcon";
|
||||
|
||||
|
||||
export default function InstallQzCode() {
|
||||
const theme = useTheme();
|
||||
return(
|
||||
<InstallQzOnSiteParent outerContainerSx={{flexDirection: "column"}}>
|
||||
<Box sx={{display: "flex", justifyContent: "space-between"}}>
|
||||
<Box sx={{ maxWidth: "520px", width: "100%", display: "flex", flexDirection: "column", gap: "20px"}}>
|
||||
<Typography>1. Код инициализации</Typography>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Вставьте блок head в начале страницы</Typography>
|
||||
<TextField
|
||||
id="outlined-multiline-static"
|
||||
multiline
|
||||
rows={9}
|
||||
value="<script>
|
||||
(function(w, d, s, o){
|
||||
var j = d.createElement(s); j.async = true; j.src = //script.marquiz.ru/v2.js';j.onload = function() {
|
||||
if (document.readyState !== 'loading') Marquiz.init(o);
|
||||
else document.addEventListener('DOMContentLoaded', function() {
|
||||
Marquiz.init(o);
|
||||
});"
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
maxWidth: "520px",
|
||||
width: "100%",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
fontSize: "18px", alignItems: "flex-start"
|
||||
}
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: <InputAdornment position="start">
|
||||
<IconButton
|
||||
edge="end"
|
||||
sx={{marginTop: "22px"}}
|
||||
>
|
||||
<CopyIcon color={'#ffffff'} bgcolor={theme.palette.brightPurple.main}/>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ maxWidth: "520px", width: "100%", display: "flex", flexDirection: "column", gap: "20px"}}>
|
||||
<Typography>2. Код кнопки</Typography>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Установите код в то место, где должна быть кнопка открытия квиза</Typography>
|
||||
<TextField
|
||||
id="outlined-multiline-static"
|
||||
multiline
|
||||
rows={9}
|
||||
value="<script>
|
||||
(function(w, d, s, o){
|
||||
var j = d.createElement(s); j.async = true; j.src = //script.marquiz.ru/v2.js';j.onload = function() {
|
||||
if (document.readyState !== 'loading') Marquiz.init(o);
|
||||
else document.addEventListener('DOMContentLoaded', function() {
|
||||
Marquiz.init(o);
|
||||
});"
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
fontSize: "18px", alignItems: "flex-start"
|
||||
}
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: <InputAdornment position="start">
|
||||
<IconButton
|
||||
edge="end"
|
||||
sx={{marginTop: "22px"}}
|
||||
>
|
||||
<CopyIcon color={'#ffffff'} bgcolor={theme.palette.brightPurple.main}/>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}}
|
||||
/>
|
||||
<Box >
|
||||
<Button variant="contained">Отправить код программисту</Button>
|
||||
<Box sx={{display: "flex"}}>
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
sx={{color: theme.palette.brightPurple.main}}
|
||||
// onClick={() => {
|
||||
// }}
|
||||
>
|
||||
Инструкция к платформам
|
||||
</Link>
|
||||
<IconButton><InfoIcon/></IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ maxWidth: "520px", width: "100%"}}>
|
||||
<Typography>3. Проверьте правильность установки</Typography>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Введите полный адрес страницы, где вы установили квиз и нажмите "проверить"</Typography>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
background: "#EEE4FC",
|
||||
border: "1px solid #7E2AEA",
|
||||
padding: "20px 50px 20px 20px",
|
||||
borderRadius: "8px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
marginBottom: "20px"
|
||||
}}>
|
||||
<Typography>
|
||||
Код нужно вставить один раз. Изменения в самом квизе будут отображаться автоматически после сохранения.
|
||||
</Typography>
|
||||
<Typography>
|
||||
Для добавления нескольких квизов на одну страницу, код инициализации достаточно добавить один раз с любого квиза,
|
||||
а затем вставить кнопки открытия с нужных квизов
|
||||
</Typography>
|
||||
</Box>
|
||||
</InstallQzOnSiteParent>
|
||||
)
|
||||
}
|
||||
@ -7,14 +7,16 @@ import NumberThree from "@icons/NumberThree";
|
||||
interface Props {
|
||||
outerContainerSx?: SxProps<Theme>;
|
||||
children?: React.ReactNode;
|
||||
sx?: SxProps<Theme>;
|
||||
}
|
||||
|
||||
export default function InstallQzOnSiteParent ({outerContainerSx: sx, children }: Props) {
|
||||
export default function InstallQzOnSiteParent ({outerContainerSx: sx, children}: Props) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "1160px",
|
||||
backgroundColor: '#ffffff',
|
||||
padding: '20px',
|
||||
mt: '40px',
|
||||
@ -36,6 +38,7 @@ export default function InstallQzOnSiteParent ({outerContainerSx: sx, children }
|
||||
display: 'flex',
|
||||
gap: '40px',
|
||||
marginTop: '30px',
|
||||
...sx
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
@ -1,27 +1,17 @@
|
||||
import {Box, Button, Link, Typography, useTheme} from "@mui/material";
|
||||
import OneIconBorder from "../../assets/icons/OneIconBorder";
|
||||
import React from "react";
|
||||
import React, {useState} from "react";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import Dots from '../../assets/dots.png'
|
||||
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
|
||||
import Accordion from '@mui/material/Accordion';
|
||||
import AccordionDetails from '@mui/material/AccordionDetails';
|
||||
import AccordionSummary from '@mui/material/AccordionSummary';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import AccordMy from "@ui_kit/Accordion";
|
||||
|
||||
type isExpanded = "panel1" | "panel2"
|
||||
|
||||
export default function OnButtonInstall () {
|
||||
const theme = useTheme();
|
||||
|
||||
const [expanded, setExpanded] = React.useState<string | false>("panel1");
|
||||
|
||||
const handleChange =
|
||||
(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
|
||||
setExpanded(isExpanded ? panel : false);
|
||||
};
|
||||
|
||||
|
||||
const [isExpanded, setIsExpanded] = useState<isExpanded>("panel1");
|
||||
return (
|
||||
<>
|
||||
<InstallQzOnSiteParent>
|
||||
@ -66,21 +56,13 @@ export default function OnButtonInstall () {
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: "100%"
|
||||
}}>
|
||||
<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',}}>
|
||||
<AccordMy header={"Конструктор кнопки"} isExpanded={isExpanded === "panel1"} onClick={() => setIsExpanded("panel1")} sx={{display: "flex", flexDirection: 'column',}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: '40px'
|
||||
gap: '40px',
|
||||
}}
|
||||
>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Цвет кнопки</Typography>
|
||||
@ -95,25 +77,13 @@ export default function OnButtonInstall () {
|
||||
<CustomCheckbox label={'Фиксированная'}/>
|
||||
<Typography sx={{color: theme.palette.grey2.main, marginBottom: '14px'}}>Текст кнопки</Typography>
|
||||
<CustomTextField placeholder={'Пройти тест'}/>
|
||||
</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"
|
||||
>
|
||||
<Typography>Своя кнопка</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Ссылка для вашей кнопки</Typography>
|
||||
<CustomTextField placeholder={""} text={"#popup:639727c5177be5004f11a0f2"} />
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Или событие</Typography>
|
||||
<CustomTextField placeholder={""} text={"onclick=\":639727c5177be5004f11a0f2"} />
|
||||
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
</AccordMy>
|
||||
<AccordMy header={"Своя кнопка"} isExpanded={isExpanded === "panel2"} onClick={() => setIsExpanded("panel2")} sx={{display: "flex", flexDirection: 'column', width: "100%"}}>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Ссылка для вашей кнопки</Typography>
|
||||
<CustomTextField placeholder={""} text={"#popup:639727c5177be5004f11a0f2"} />
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Или событие</Typography>
|
||||
<CustomTextField placeholder={""} text={"onclick=\":639727c5177be5004f11a0f2"} />
|
||||
</AccordMy>
|
||||
|
||||
<Link
|
||||
component='button'
|
||||
|
||||
@ -125,39 +125,47 @@ export default function VidjetInstall () {
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
<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="10"
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "48px",
|
||||
width: "60px",
|
||||
borderRadius: "10px",
|
||||
{value === "1" ?
|
||||
<Box>
|
||||
<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="10"
|
||||
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>
|
||||
<Typography sx={{color: theme.palette.grey2.main, fontSize: "14px"}}>Время, через которое квиз автоматически откроется</Typography>
|
||||
</Box>
|
||||
:
|
||||
<></>
|
||||
}
|
||||
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>секунд</Typography>
|
||||
</Box>
|
||||
<Typography sx={{color: theme.palette.grey2.main, fontSize: "14px"}}>Время, через которое квиз автоматически откроется</Typography>
|
||||
<CustomCheckbox label={"Отключить на мобильных устройствах"}/>
|
||||
<CustomCheckbox label={"Полностью скрывать виджет при закрытии"}/>
|
||||
</Box>
|
||||
|
||||
@ -3,11 +3,11 @@ import { Box, IconButton, useTheme } from "@mui/material";
|
||||
|
||||
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
|
||||
|
||||
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
|
||||
import Branching from "../../assets/icons/questionsPage/branching";
|
||||
import HideIcon from "../../assets/icons/questionsPage/hideIcon";
|
||||
import CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
|
||||
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
|
||||
import SettingIcon from "@icons/questionsPage/settingIcon";
|
||||
import Branching from "@icons/questionsPage/branching";
|
||||
import HideIcon from "@icons/questionsPage/hideIcon";
|
||||
import CopyIcon from "@icons/questionsPage/CopyIcon";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
|
||||
import StarIconPoints from "./StarIconsPoints";
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from "react";
|
||||
import { useState } from "react";
|
||||
import { Box, IconButton, TextField, Typography } from "@mui/material";
|
||||
import {Box, Button, IconButton, TextField, Typography} from "@mui/material";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
|
||||
import CustomButton from "../CustomButton";
|
||||
import CustomButton from "../../../components/CustomButton";
|
||||
|
||||
import SwitchAnswerOptions from "./SwitchAnswerOptions";
|
||||
import ButtonsOptionsForm from "./ButtinsOptionsForm";
|
||||
@ -12,10 +12,10 @@ import DiscountButtons from "./DiscountButtons";
|
||||
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
|
||||
import OneIcon from "../../assets/icons/questionsPage/OneIcon";
|
||||
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
|
||||
import PointsIcon from "../../assets/icons/questionsPage/PointsIcon";
|
||||
import Info from "../../assets/icons/Info";
|
||||
import OneIcon from "@icons/questionsPage/OneIcon";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
import PointsIcon from "@icons/questionsPage/PointsIcon";
|
||||
import Info from "@icons/Info";
|
||||
|
||||
import ImageAndVideoButtons from "./ImageAndVideoButtons";
|
||||
|
||||
@ -111,22 +111,18 @@ export const DescriptionForm = () => {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<CustomButton
|
||||
<Button
|
||||
onClick={() => setForwarding(true)}
|
||||
variant="contained"
|
||||
variant="outlined"
|
||||
sx={{
|
||||
display: forwarding ? "none" : "",
|
||||
ml: "20px",
|
||||
mb: "20px",
|
||||
color: "#9A9AAF",
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "194px",
|
||||
height: "48px",
|
||||
border: "1px solid #9A9AAF",
|
||||
|
||||
}}
|
||||
>
|
||||
Переадрисация +
|
||||
</CustomButton>
|
||||
Переадресация +
|
||||
</Button>
|
||||
{forwarding ? (
|
||||
<Box sx={{ ml: "20px", mt: "-36px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
|
||||
@ -167,19 +163,12 @@ export const DescriptionForm = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
mb: "20px",
|
||||
color: "#9A9AAF",
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "119px",
|
||||
height: "48px",
|
||||
border: "1px solid #9A9AAF",
|
||||
}}
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{mb: "20px"}}
|
||||
>
|
||||
Кнопка +
|
||||
</CustomButton>
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
<ButtonsOptionsForm switchState={switchState} SSHC={SSHC} />
|
||||
@ -1,6 +1,6 @@
|
||||
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
import {Box, IconButton, Typography, useTheme} from "@mui/material";
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
import CustomButton from "../../../components/CustomButton";
|
||||
|
||||
export default function DiscountButtons() {
|
||||
const theme = useTheme();
|
||||
@ -1,7 +1,7 @@
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
|
||||
import AddImage from "../../assets/icons/questionsPage/addImage";
|
||||
import AddVideofile from "../../assets/icons/questionsPage/addVideofile";
|
||||
import AddImage from "@icons/questionsPage/addImage";
|
||||
import AddVideofile from "@icons/questionsPage/addVideofile";
|
||||
|
||||
export default function ImageAndVideoButtons() {
|
||||
const theme = useTheme();
|
||||
@ -11,8 +11,8 @@ import {
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import * as React from "react";
|
||||
import ArrowDown from "../../assets/icons/ArrowDownIcon";
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
import ArrowDown from "@icons/ArrowDownIcon";
|
||||
import CustomButton from "../../../components/CustomButton";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function PointsQuestions() {
|
||||
@ -1,8 +1,8 @@
|
||||
import { Box, IconButton, SxProps, Theme, Typography } from "@mui/material";
|
||||
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
import CustomButton from "../../../components/CustomButton";
|
||||
|
||||
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
|
||||
const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] = [
|
||||
{
|
||||
@ -1,6 +1,6 @@
|
||||
import Info from "../../assets/icons/Info";
|
||||
import Info from "@icons/Info";
|
||||
import { Box, TextField } from "@mui/material";
|
||||
import BranchingQuestions from "../../pages/Questions/branchingQuestions";
|
||||
import BranchingQuestions from "../../Questions/branchingQuestions";
|
||||
import PointsQuestions from "./PointsQuestions";
|
||||
|
||||
interface Props {
|
||||
@ -1,13 +1,14 @@
|
||||
import { Box, IconButton, TextField, Typography } from "@mui/material";
|
||||
import { SelectIconButton } from "../pages/Questions/OptionsPicture/settingOpytionsPict";
|
||||
import { SelectIconButton } from "../Questions/OptionsPicture/settingOpytionsPict";
|
||||
import { useState } from "react";
|
||||
|
||||
import FormatIcon2 from "../assets/icons/questionsPage/FormatIcon2";
|
||||
import FormatIcon1 from "../assets/icons/questionsPage/FormatIcon1";
|
||||
import Info from "../assets/icons/Info";
|
||||
import ProportionsIcon21 from "../assets/icons/questionsPage/ProportionsIcon21";
|
||||
import ProportionsIcon11 from "../assets/icons/questionsPage/ProportionsIcon11";
|
||||
import ProportionsIcon12 from "../assets/icons/questionsPage/ProportionsIcon12";
|
||||
import FormatIcon2 from "@icons/questionsPage/FormatIcon2";
|
||||
import FormatIcon1 from "@icons/questionsPage/FormatIcon1";
|
||||
import Info from "@icons/Info";
|
||||
import ProportionsIcon21 from "@icons/questionsPage/ProportionsIcon21";
|
||||
import ProportionsIcon11 from "@icons/questionsPage/ProportionsIcon11";
|
||||
import ProportionsIcon12 from "@icons/questionsPage/ProportionsIcon12";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
|
||||
export const ResultListForm = () => {
|
||||
const [alignType, setAlignType] = useState<"left" | "right">("left");
|
||||
@ -174,20 +175,7 @@ export const ResultListForm = () => {
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ mt: "20px", display: "flex", alignItems: "center" }}>
|
||||
<IconButton sx={{ width: "26px", height: "26px", bgcolor: "#7E2AEA", borderRadius: "6px" }}>
|
||||
<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M16.75 1L6.25 11.5L1 6.25"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</IconButton>
|
||||
<Typography sx={{ color: "#9A9AAF", p: "0 13px" }} component="p">
|
||||
Кнопка "Не знаю, что выбрать"
|
||||
</Typography>
|
||||
<CustomCheckbox label={"Кнопка \"Не знаю, что выбрать\""}/>
|
||||
<Info />
|
||||
</Box>
|
||||
</Box>
|
||||
@ -1,16 +1,13 @@
|
||||
import { Box, Button, Typography, useTheme } from "@mui/material";
|
||||
|
||||
import { SettingForm } from "./SettingForm";
|
||||
import { DescriptionForm } from "../../components/DescriptionForm/DescriptionForm";
|
||||
import { ResultListForm } from "../../components/ResultListForm";
|
||||
|
||||
import { DescriptionForm } from "./DescriptionForm/DescriptionForm";
|
||||
import { ResultListForm } from "./ResultListForm";
|
||||
import CustomWrapper from "../../components/CustomWrapper";
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
import BackButton from "../../components/Button/BackButton";
|
||||
|
||||
import Plus from "@icons/Plus";
|
||||
import Info from "@icons/Info";
|
||||
import IconPlus from "@icons/IconPlus";
|
||||
import ArrowLeft from "@icons/questionsPage/arrowLeft";
|
||||
import React from "react";
|
||||
|
||||
export const Setting = () => {
|
||||
const theme = useTheme();
|
||||
@ -78,18 +75,12 @@ export const Setting = () => {
|
||||
<Box sx={{ pt: "30px", display: "flex", alignItems: "center" }}>
|
||||
<Plus />
|
||||
<Typography component="div" sx={{ ml: "auto" }}>
|
||||
<BackButton />
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
width: "194px",
|
||||
height: "44px",
|
||||
ml: "10px",
|
||||
}}
|
||||
>
|
||||
<Button variant='outlined' sx={{padding: '10px 20px', borderRadius: '8px'}}>
|
||||
<ArrowLeft/>
|
||||
</Button>
|
||||
<Button variant="contained" sx={{ml: "10px",}}>
|
||||
Настроить форму
|
||||
</CustomButton>
|
||||
</Button>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import { useState } from "react";
|
||||
import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
|
||||
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
import { SwitchSetting } from "../../components/SwichResult";
|
||||
import { SwitchSetting } from "./SwichResult";
|
||||
|
||||
import Info from "@icons/Info";
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import {Box, FormControlLabel, IconButton, Typography} from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import {Box, FormControlLabel} from "@mui/material";
|
||||
import CustomizedSwitch from "@ui_kit/CustomSwitch";
|
||||
import * as React from "react";
|
||||
|
||||
@ -10,7 +9,6 @@ interface Props {
|
||||
}
|
||||
|
||||
export const SwitchSetting = ({ text, icon, onClick }: Props) => {
|
||||
// const [active, setActive] = useState<boolean>(false);
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -25,7 +23,6 @@ export const SwitchSetting = ({ text, icon, onClick }: Props) => {
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "left", maxWidth: "756px", width: "100%" }}>
|
||||
<img src={icon} alt="icon" />
|
||||
{/*<Typography sx={{ color: "#9A9AAF", ml: "14px" }}>{text}</Typography>*/}
|
||||
<FormControlLabel
|
||||
value="start"
|
||||
control={<CustomizedSwitch/>}
|
||||
@ -39,27 +36,8 @@ export const SwitchSetting = ({ text, icon, onClick }: Props) => {
|
||||
paddingRight: "15px"
|
||||
}}
|
||||
onClick={onClick}
|
||||
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
{/*<IconButton disableRipple onClick={() => setActive(!active)}>*/}
|
||||
{/* <svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">*/}
|
||||
{/* <rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />*/}
|
||||
{/* <rect*/}
|
||||
{/* x={active ? "23" : "1"}*/}
|
||||
{/* y="1"*/}
|
||||
{/* width="28"*/}
|
||||
{/* height="28"*/}
|
||||
{/* rx="14"*/}
|
||||
{/* fill="white"*/}
|
||||
{/* stroke={active ? "#7E2AEA" : "#9A9AAF"}*/}
|
||||
{/* strokeWidth="2"*/}
|
||||
{/* />*/}
|
||||
{/* </svg>*/}
|
||||
{/*</IconButton>*/}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
101
src/ui_kit/Accordion.tsx
Normal file
101
src/ui_kit/Accordion.tsx
Normal file
@ -0,0 +1,101 @@
|
||||
import {Box, SxProps, Theme, Typography, useMediaQuery, useTheme} from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
|
||||
interface Props {
|
||||
children?: React.ReactNode;
|
||||
isExpanded?: boolean;
|
||||
onClick?: () => void;
|
||||
sx?: SxProps<Theme>;
|
||||
header: string;
|
||||
}
|
||||
|
||||
export default function AccordMy ({ children, isExpanded = false, onClick, sx, header }: Props) {
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
paddingBottom: "15px",
|
||||
overflow: "hidden",
|
||||
borderBottom: `1px solid ${theme.palette.grey2.main}`,
|
||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
||||
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
||||
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
||||
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
|
||||
4749)`,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
onClick={onClick}
|
||||
sx={{
|
||||
paddingTop: "15px",
|
||||
paddingRight: "20px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
cursor: "pointer",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: upMd ? "18px" : "16px",
|
||||
lineHeight: upMd ? undefined : "19px",
|
||||
px: 0,
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
height: "100%",
|
||||
alignItems: "center",
|
||||
gap: upSm ? "111px" : "17px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<svg style={{ transform: isExpanded ? "rotate(180deg)" : undefined }} xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none">
|
||||
<path d="M20.5 15.2949L16 20.2949L11.5 15.2949" stroke="#757575" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
{isExpanded && (
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "transparent",
|
||||
gap: "15px",
|
||||
paddingTop: "15px",
|
||||
...sx
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@ -1,12 +1,14 @@
|
||||
import { FormControlLabel, Checkbox, useTheme, Box } from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
handleChange?: () => void;
|
||||
handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
checked?: boolean;
|
||||
}
|
||||
|
||||
export default function CustomCheckbox({ label, handleChange }: Props) {
|
||||
export default function CustomCheckbox({ label, handleChange, checked}: Props) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
@ -16,6 +18,7 @@ export default function CustomCheckbox({ label, handleChange }: Props) {
|
||||
icon={<Icon />}
|
||||
checkedIcon={<CheckedIcon />}
|
||||
onChange={handleChange}
|
||||
checked={checked}
|
||||
/>}
|
||||
label={label}
|
||||
sx={{
|
||||
|
||||
@ -4,7 +4,7 @@ import BackArrowIcon from "../assets/icons/BackArrowIcon";
|
||||
import EyeIcon from "../assets/icons/EyeIcon";
|
||||
import CustomAvatar from "../components/Navbar/Avatar";
|
||||
import NavMenuItem from "../components/NavMenuItem";
|
||||
import PenaLogo from "../components/PenaLogo";
|
||||
import PenaLogo from "./PenaLogo";
|
||||
|
||||
interface Props {
|
||||
isLoggedIn: boolean;
|
||||
|
||||
@ -35,6 +35,7 @@ const theme = createTheme({
|
||||
padding: '13px 20px',
|
||||
borderRadius: '8px',
|
||||
color: '#ffffff',
|
||||
boxShadow: "none",
|
||||
"&:hover": {
|
||||
backgroundColor: "#581CA7"
|
||||
}
|
||||
@ -48,10 +49,11 @@ const theme = createTheme({
|
||||
backgroundColor: "#F2F3F7",
|
||||
padding: '10px 20px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #9A9AAF',
|
||||
border: '1px solid #7E2AEA',
|
||||
color: '#9A9AAF',
|
||||
"&:hover": {
|
||||
backgroundColor: "#581CA7"
|
||||
backgroundColor: "#581CA7",
|
||||
border: '1px solid #581CA7',
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user