работа с десктопами 37, 39 настройка передачи результатов выбора в селект
This commit is contained in:
Tamara
parent
3d478b042a
commit
12e250d9a4
@ -4,15 +4,17 @@ import { Box, Typography, useTheme } from "@mui/material";
|
||||
interface Props {
|
||||
image: string;
|
||||
text: string;
|
||||
border?: string;
|
||||
}
|
||||
|
||||
export default function CardWithImage({ image, text }: Props) {
|
||||
export default function CardWithImage({ image, text, border }: Props) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
flexGrow: 1,
|
||||
borderRadius: "12px",
|
||||
border: {border},
|
||||
backgroundColor: "white",
|
||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Box, FormControl, Link, MenuItem, Select, Typography, useTheme } from "@mui/material";
|
||||
import {Box, Button, FormControl, Link, MenuItem, Select, Typography, useTheme} from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import AlignLeftIcon from "../../assets/icons/AlignLeftIcon";
|
||||
@ -14,6 +14,8 @@ import SelectableButton from "@ui_kit/SelectableButton";
|
||||
import SelectableIconButton from "./SelectableIconButton";
|
||||
import UploadBox from "@ui_kit/UploadBox";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import {quizStore} from "@root/quizes";
|
||||
import {useParams} from "react-router-dom";
|
||||
|
||||
|
||||
const designTypes = [
|
||||
@ -27,159 +29,199 @@ type BackgroundType = "image" | "video";
|
||||
type AlignType = "left" | "right";
|
||||
|
||||
export default function StartPageSettings() {
|
||||
const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
|
||||
const params = Number(useParams().quizId);
|
||||
const theme = useTheme();
|
||||
const [designType, setDesignType] = useState<DesignType | "">(designTypes[0][0]);
|
||||
const designType = listQuizes[params].startpage
|
||||
// const [designType, setDesignType] = useState<DesignType | "">(designTypes[0][0]);
|
||||
const [backgroundType, setBackgroundType] = useState<BackgroundType>("image");
|
||||
const [alignType, setAlignType] = useState<AlignType>("left");
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
backgroundColor: "white",
|
||||
borderRadius: "12px",
|
||||
p: "20px",
|
||||
display: "flex",
|
||||
gap: "20px",
|
||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
<>
|
||||
<Box sx={{
|
||||
backgroundColor: "white",
|
||||
borderRadius: "12px",
|
||||
p: "20px",
|
||||
display: "flex",
|
||||
gap: "20px",
|
||||
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.0674749)`,
|
||||
}}>
|
||||
<Box sx={{
|
||||
pr: "20px",
|
||||
borderRight: `1px solid ${theme.palette.grey2.main}`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flex: `1 1 365px`,
|
||||
}}>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Дизайн</Typography>
|
||||
<FormControl
|
||||
fullWidth
|
||||
size="small"
|
||||
sx={{
|
||||
width: "100%",
|
||||
minWidth: "200px",
|
||||
height: "48px",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
id="category-select"
|
||||
variant="outlined"
|
||||
value={designType}
|
||||
displayEmpty
|
||||
onChange={e => setDesignType(e.target.value as DesignType)}
|
||||
<Box sx={{
|
||||
pr: "20px",
|
||||
borderRight: `1px solid ${theme.palette.grey2.main}`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flex: `1 1 365px`,
|
||||
}}>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Дизайн</Typography>
|
||||
<FormControl
|
||||
fullWidth
|
||||
size="small"
|
||||
sx={{
|
||||
width: "100%",
|
||||
minWidth: "200px",
|
||||
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} />}
|
||||
>
|
||||
{designTypes.map(type =>
|
||||
<MenuItem
|
||||
key={type[0]}
|
||||
value={type[0]}
|
||||
sx={{
|
||||
<Select
|
||||
id="category-select"
|
||||
variant="outlined"
|
||||
value={designType}
|
||||
displayEmpty
|
||||
onChange={(e, i) => console.log(e.target, e.target.value, i)}
|
||||
// onChange={e => setDesignType(e.target.value as DesignType)}
|
||||
// onChange={updateQuizesList(params, {startpage: "standard"})}
|
||||
sx={{
|
||||
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",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
{type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
|
||||
{type[0]}
|
||||
</MenuItem>
|
||||
)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Фон</Typography>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}>
|
||||
<SelectableButton isSelected={backgroundType === "image"} onClick={() => setBackgroundType("image")}>
|
||||
Изображение
|
||||
</SelectableButton>
|
||||
<SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
|
||||
Видео
|
||||
</SelectableButton>
|
||||
</Box>
|
||||
{backgroundType === "image" ?
|
||||
<>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Изображение</Typography>
|
||||
<UploadBox icon={<UploadIcon />} text="5 MB максимум" />
|
||||
<Link sx={{
|
||||
mt: "20px",
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
color: theme.palette.orange.main,
|
||||
textDecorationColor: theme.palette.orange.main
|
||||
}}>Размер картинок</Link>
|
||||
<Box sx={{
|
||||
mt: "20px",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
}
|
||||
}}
|
||||
IconComponent={props => <ArrowDown {...props} />}
|
||||
>
|
||||
{designTypes.map(type =>
|
||||
<MenuItem
|
||||
key={type[0]}
|
||||
value={type[0]}
|
||||
|
||||
}}>
|
||||
<MobilePhoneIcon bgcolor="#EEE4FC" />
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
{type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
|
||||
{type[0]}
|
||||
</MenuItem>
|
||||
)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Фон</Typography>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}>
|
||||
<SelectableButton isSelected={backgroundType === "image"} onClick={() => setBackgroundType("image")}>
|
||||
Изображение
|
||||
</SelectableButton>
|
||||
<SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
|
||||
Видео
|
||||
</SelectableButton>
|
||||
</Box>
|
||||
{backgroundType === "image" ?
|
||||
<>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Изображение</Typography>
|
||||
<UploadBox icon={<UploadIcon />} text="5 MB максимум" />
|
||||
<Link sx={{
|
||||
mt: "20px",
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
color: theme.palette.brightPurple.main,
|
||||
textDecorationColor: theme.palette.brightPurple.main
|
||||
}}>мобильная версия</Link>
|
||||
</Box>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "7px",
|
||||
mt: "20px",
|
||||
mb: "14px",
|
||||
}}>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main }}>Добавить видео</Typography>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
color: theme.palette.orange.main,
|
||||
textDecorationColor: theme.palette.orange.main
|
||||
}}>Размер картинок</Link>
|
||||
<Box sx={{
|
||||
mt: "20px",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
|
||||
}}>
|
||||
<MobilePhoneIcon bgcolor="#EEE4FC" />
|
||||
<Link sx={{
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
color: theme.palette.brightPurple.main,
|
||||
textDecorationColor: theme.palette.brightPurple.main
|
||||
}}>мобильная версия</Link>
|
||||
</Box>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "7px",
|
||||
mt: "20px",
|
||||
mb: "14px",
|
||||
}}>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main }}>Добавить видео</Typography>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
<UploadBox
|
||||
icon={<UploadIcon />}
|
||||
sx={{
|
||||
height: "48px",
|
||||
width: "48px",
|
||||
}}
|
||||
/>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>Настройки видео</Typography>
|
||||
<CustomCheckbox label="Зацикливать видео" />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Изображение для мобильной версии</Typography>
|
||||
<UploadBox icon={<UploadIcon />} text="5 MB максимум" />
|
||||
</>
|
||||
}
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Расположение элементов</Typography>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}>
|
||||
<SelectableIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={AlignLeftIcon} />
|
||||
<SelectableIconButton onClick={() => setAlignType("right")} isActive={alignType === "right"} Icon={AlignRightIcon} />
|
||||
</Box>
|
||||
{backgroundType === "image" &&
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px" }}>
|
||||
Логотип</Typography>
|
||||
}
|
||||
<UploadBox sx={{ mt: "20px" }} icon={<UploadIcon />} text="5 MB максимум" />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||||
Favicon</Typography>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
alignItems: "end",
|
||||
gap: "10px",
|
||||
}}>
|
||||
<UploadBox
|
||||
icon={<UploadIcon />}
|
||||
sx={{
|
||||
@ -187,91 +229,64 @@ export default function StartPageSettings() {
|
||||
width: "48px",
|
||||
}}
|
||||
/>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>Настройки видео</Typography>
|
||||
<CustomCheckbox label="Зацикливать видео" />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Изображение для мобильной версии</Typography>
|
||||
<UploadBox icon={<UploadIcon />} text="5 MB максимум" />
|
||||
</>
|
||||
}
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Расположение элементов</Typography>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}>
|
||||
<SelectableIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={AlignLeftIcon} />
|
||||
<SelectableIconButton onClick={() => setAlignType("right")} isActive={alignType === "right"} Icon={AlignRightIcon} />
|
||||
<Typography sx={{
|
||||
color: theme.palette.orange.main,
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
textDecoration: "underline",
|
||||
}}>5 MB максимум</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
{backgroundType === "image" &&
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px" }}>
|
||||
Логотип</Typography>
|
||||
}
|
||||
<UploadBox sx={{ mt: "20px" }} icon={<UploadIcon />} text="5 MB максимум" />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||||
Favicon</Typography>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
alignItems: "end",
|
||||
gap: "10px",
|
||||
flexDirection: "column",
|
||||
flex: `1 1 795px`,
|
||||
}}>
|
||||
<UploadBox
|
||||
icon={<UploadIcon />}
|
||||
sx={{
|
||||
height: "48px",
|
||||
width: "48px",
|
||||
}}
|
||||
/>
|
||||
<Typography sx={{
|
||||
color: theme.palette.orange.main,
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Заголовок</Typography>
|
||||
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography>
|
||||
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography>
|
||||
<CustomTextField placeholder="Начать" text={""} />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography>
|
||||
<CustomTextField placeholder="+7 900 000 00 00" text={""} />
|
||||
<CustomCheckbox label="Кликабельный" />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography>
|
||||
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography>
|
||||
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography>
|
||||
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
||||
<Link sx={{
|
||||
mt: "20px",
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
textDecoration: "underline",
|
||||
}}>5 MB максимум</Typography>
|
||||
color: theme.palette.brightPurple.main,
|
||||
textDecorationColor: theme.palette.brightPurple.main
|
||||
}}>Дополнительно</Link>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography>
|
||||
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
||||
<Typography sx={{
|
||||
mt: "20px",
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
maxWidth: "80%",
|
||||
color: theme.palette.grey3.main,
|
||||
}}>
|
||||
Текст-заполнитель —
|
||||
это текст, который имеет Текст-заполнитель —
|
||||
это текст, который имеет Текст-заполнитель —
|
||||
это текст, который имеет Текст-заполнитель —
|
||||
это текст, который имеет Текст-заполнитель
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flex: `1 1 795px`,
|
||||
}}>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Заголовок</Typography>
|
||||
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography>
|
||||
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography>
|
||||
<CustomTextField placeholder="Начать" text={""} />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography>
|
||||
<CustomTextField placeholder="+7 900 000 00 00" text={""} />
|
||||
<CustomCheckbox label="Кликабельный" />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography>
|
||||
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography>
|
||||
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography>
|
||||
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
||||
<Link sx={{
|
||||
mt: "20px",
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
color: theme.palette.brightPurple.main,
|
||||
textDecorationColor: theme.palette.brightPurple.main
|
||||
}}>Дополнительно</Link>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography>
|
||||
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
||||
<Typography sx={{
|
||||
mt: "20px",
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
maxWidth: "80%",
|
||||
color: theme.palette.grey3.main,
|
||||
}}>
|
||||
Текст-заполнитель —
|
||||
это текст, который имеет Текст-заполнитель —
|
||||
это текст, который имеет Текст-заполнитель —
|
||||
это текст, который имеет Текст-заполнитель —
|
||||
это текст, который имеет Текст-заполнитель
|
||||
</Typography>
|
||||
<Box>
|
||||
<Button variant="outlined">Отключить стартовую страницу</Button>
|
||||
<Button variant="contained">Настроить вопросы</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -26,24 +26,27 @@ export default function Steptwo ({handleNext}:HandleNext) {
|
||||
}}>
|
||||
<Button variant='text'
|
||||
onClick={() => {
|
||||
updateQuizesList(params, {startpage: "standard"})
|
||||
handleNext()
|
||||
}}
|
||||
>
|
||||
<CardWithImage image={cardImage1} text="Standart" />
|
||||
<CardWithImage image={cardImage1} text="Standard" border={listQuizes[params].startpage === "standard" ? "1px solid #7E2AEA" : "none"} />
|
||||
</Button>
|
||||
<Button variant='text'
|
||||
onClick={() => {
|
||||
updateQuizesList(params, {startpage: "expanded"})
|
||||
handleNext()
|
||||
}}
|
||||
>
|
||||
<CardWithImage image={cardImage2} text="Expanded" />
|
||||
<CardWithImage image={cardImage2} text="Expanded" border={listQuizes[params].startpage === "expanded" ? "1px solid #7E2AEA" : "none"}/>
|
||||
</Button>
|
||||
<Button variant='text'
|
||||
onClick={() => {
|
||||
updateQuizesList(params, {startpage: "centered"})
|
||||
handleNext()
|
||||
}}
|
||||
>
|
||||
<CardWithImage image={cardImage3} text="Centered" />
|
||||
<CardWithImage image={cardImage3} text="Centered" border={listQuizes[params].startpage === "centered" ? "1px solid #7E2AEA" : "none"}/>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@ -35,41 +35,15 @@ interface Quizes {
|
||||
average_time: number,
|
||||
super: true,
|
||||
group_id: number,
|
||||
step: number
|
||||
step: number,
|
||||
startpage: string,
|
||||
config1?: any
|
||||
}
|
||||
|
||||
export const quizStore = create<QuizStore>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
listQuizes: {
|
||||
// 1: {
|
||||
// "id": 0,
|
||||
// "qid": "string",
|
||||
// "deleted": false,
|
||||
// "archived": true,
|
||||
// "fingerprinting": true,
|
||||
// "repeatable": true,
|
||||
// "note_prevented": true,
|
||||
// "mail_notifications": true,
|
||||
// "unique_answers": true,
|
||||
// "name": "string",
|
||||
// "description": "string",
|
||||
// "config": "string",
|
||||
// "status": "string",
|
||||
// "limit": 0,
|
||||
// "due_to": 0,
|
||||
// "time_of_passing": 0,
|
||||
// "pausable": true,
|
||||
// "version": 0,
|
||||
// "version_comment": "string",
|
||||
// "created_at": "string",
|
||||
// "updated_at": "string",
|
||||
// "question_cnt": 0,
|
||||
// "passed_count": 0,
|
||||
// "average_time": 0,
|
||||
// "super": true,
|
||||
// "group_id": 0
|
||||
// }
|
||||
},
|
||||
updateQuizesList: (id: number, values: any) => {
|
||||
const state = get()["listQuizes"] || {};
|
||||
@ -120,7 +94,35 @@ export const quizStore = create<QuizStore>()(
|
||||
"average_time": 0,
|
||||
"super": true,
|
||||
"group_id": 0,
|
||||
"step": 1
|
||||
"step": 1,
|
||||
"startpage": "",
|
||||
"config1": {
|
||||
"type": "", // quiz или form
|
||||
"favicon": [
|
||||
{"attrs": "320*650apple","link":"hub.pena.digital/fav/squiz1.jpg"}
|
||||
],
|
||||
"logo": "hub.pena.digital/img/logo",
|
||||
"startpage": {
|
||||
"description": "",// приветственный текст опроса
|
||||
"button": "Начать", // текст на кнопке начала опроса
|
||||
"position": "ltr", // ltr или rtl. отображение элементов поверх фона
|
||||
"background": {
|
||||
"type": "image", //image или video
|
||||
"desctop": "hub.pena.digital/img/back/full.png",
|
||||
"mobile": "hub.pena.digital/img/back/mobile.png",
|
||||
"video":"hub.pena.digital/vid/back/vi1.mp4",
|
||||
"cycle": true //зацикливать видео или нет
|
||||
},
|
||||
},
|
||||
"info": {
|
||||
"phonenumber": "+79885895677",
|
||||
"clickable": true,
|
||||
"orgname": "ООО \"Пена\"",
|
||||
"site": "hub.pena.digital",
|
||||
"law": "юридическая информация"
|
||||
},
|
||||
"meta": "что-то"
|
||||
}
|
||||
};
|
||||
set({listQuizes: newListQuizes});
|
||||
return id;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user