Result create
This commit is contained in:
ArtChaos189
parent
152c34e805
commit
8b8f23a0d1
BIN
src/assets/Rectangle 110.png
Normal file
BIN
src/assets/Rectangle 110.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
5
src/assets/icon/ArrowCounterClockWise.svg
Normal file
5
src/assets/icon/ArrowCounterClockWise.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 0H6C2.68629 0 0 2.68629 0 6V24C0 27.3137 2.68629 30 6 30H24C27.3137 30 30 27.3137 30 24V6C30 2.68629 27.3137 0 24 0Z" fill="#F2F3F7"/>
|
||||
<path d="M9.35156 11.6836H3.72656V6.05859" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.71094 22.2891C9.15283 23.7321 10.9903 24.7151 12.991 25.1137C14.9916 25.5123 17.0656 25.3086 18.9504 24.5283C20.8353 23.748 22.4464 22.4263 23.5799 20.7302C24.7134 19.0341 25.3185 17.04 25.3185 15C25.3185 12.96 24.7134 10.9659 23.5799 9.26981C22.4464 7.57375 20.8353 6.25197 18.9504 5.47169C17.0656 4.69141 14.9916 4.48768 12.991 4.88627C10.9903 5.28486 9.15283 6.26787 7.71094 7.71094L3.72656 11.6836" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 875 B |
8
src/assets/icon/ShareNetwork.svg
Normal file
8
src/assets/icon/ShareNetwork.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="30" height="30" rx="6" fill="#F2F3F7"/>
|
||||
<path d="M7.5 18.75C9.57107 18.75 11.25 17.0711 11.25 15C11.25 12.9289 9.57107 11.25 7.5 11.25C5.42893 11.25 3.75 12.9289 3.75 15C3.75 17.0711 5.42893 18.75 7.5 18.75Z" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20.625 27.1875C22.6961 27.1875 24.375 25.5086 24.375 23.4375C24.375 21.3664 22.6961 19.6875 20.625 19.6875C18.5539 19.6875 16.875 21.3664 16.875 23.4375C16.875 25.5086 18.5539 27.1875 20.625 27.1875Z" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20.625 10.3125C22.6961 10.3125 24.375 8.63357 24.375 6.5625C24.375 4.49143 22.6961 2.8125 20.625 2.8125C18.5539 2.8125 16.875 4.49143 16.875 6.5625C16.875 8.63357 18.5539 10.3125 20.625 10.3125Z" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.4766 8.58984L10.6562 12.9727" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.6562 17.0273L17.4766 21.4102" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
9
src/assets/icon/listChecks.svg
Normal file
9
src/assets/icon/listChecks.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 0H6C2.68629 0 0 2.68629 0 6V24C0 27.3137 2.68629 30 6 30H24C27.3137 30 30 27.3137 30 24V6C30 2.68629 27.3137 0 24 0Z" fill="#F2F3F7"/>
|
||||
<path d="M4.6875 15H15" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.6875 7.5H15" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.6875 22.5H15" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M25.3125 5.625L21.2461 9.375L19.2188 7.5" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M25.3125 13.125L21.2461 16.875L19.2188 15" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M25.3125 20.625L21.2461 24.375L19.2188 22.5" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 981 B |
25
src/components/Button/BackButton.tsx
Normal file
25
src/components/Button/BackButton.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
export default function BackButton() {
|
||||
return (
|
||||
<Button
|
||||
sx={{
|
||||
border: "1px solid #7E2AEA",
|
||||
borderRadius: "8px",
|
||||
width: "64px",
|
||||
height: "44px",
|
||||
}}
|
||||
>
|
||||
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.25 8H0.75" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path
|
||||
d="M7.5 1.25L0.75 8L7.5 14.75"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
60
src/components/CreationFullCard.tsx
Normal file
60
src/components/CreationFullCard.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import { Box, Typography } from "@mui/material";
|
||||
|
||||
type Props = {
|
||||
text: string;
|
||||
text2: string;
|
||||
image: any;
|
||||
};
|
||||
|
||||
export default function CreationFullCard({ text, text2, image }: Props) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
backgroundColor: "white",
|
||||
p: "20px",
|
||||
borderRadius: "12px",
|
||||
display: "flex",
|
||||
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={{ mr: "104px", position: "relative" }}>
|
||||
<Typography variant="h5">Результаты квиза в зависимости от ответов</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#4D4D4D",
|
||||
mt: "20px",
|
||||
mb: "33px",
|
||||
width: "95%",
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#9A9AAF",
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
{text2}
|
||||
</Typography>
|
||||
</Box>
|
||||
<img
|
||||
src={image}
|
||||
alt="quiz creation"
|
||||
style={{
|
||||
display: "block",
|
||||
width: "520px",
|
||||
height: "270xp",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
217
src/components/CustomWrapper.tsx
Normal file
217
src/components/CustomWrapper.tsx
Normal file
@ -0,0 +1,217 @@
|
||||
import { useState } from "react";
|
||||
import { Box, IconButton, SvgIcon, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
|
||||
import ClearIcon from "@mui/icons-material/Clear";
|
||||
import CrossedEyeIcon from "@icons/CrossedEyeIcon";
|
||||
import CopyIcon from "@icons/CopyIcon";
|
||||
import TrashIcon from "@icons/TrashIcon";
|
||||
import CountIcon from "@icons/CountIcon";
|
||||
import MenuIcon from "@icons/MenuIcon";
|
||||
|
||||
interface Props {
|
||||
text: string;
|
||||
sx?: SxProps<Theme>;
|
||||
result?: boolean;
|
||||
}
|
||||
|
||||
export default function CustomWrapper({ text, sx, result }: Props) {
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "796px",
|
||||
|
||||
overflow: "hidden",
|
||||
borderRadius: "12px",
|
||||
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)`,
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#333647",
|
||||
"&:first-of-type": {
|
||||
borderTopLeftRadius: "12px",
|
||||
borderTopRightRadius: "12px",
|
||||
},
|
||||
"&:last-of-type": {
|
||||
borderBottomLeftRadius: "12px",
|
||||
borderBottomRightRadius: "12px",
|
||||
},
|
||||
"&:not(:last-of-type)": {
|
||||
borderBottom: `1px solid ${theme.palette.grey2.main}`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
onClick={() => setIsExpanded((prev) => !prev)}
|
||||
sx={{
|
||||
height: "88px",
|
||||
px: "20px",
|
||||
border: "1px solid white",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
cursor: "pointer",
|
||||
userSelect: "none",
|
||||
"&:hover": {
|
||||
borderColor: "#7E2AEA",
|
||||
borderRadius: `${isExpanded ? "" : "12px"}`,
|
||||
borderTopLeftRadius: "12px",
|
||||
borderTopRightRadius: "12px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
lineHeight: upMd ? undefined : "19px",
|
||||
fontWeight: 400,
|
||||
color: "#FFFFFF",
|
||||
px: 0,
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{result ? (
|
||||
<>
|
||||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
|
||||
<path
|
||||
d="M7.5 19.5625L15 12.0625L22.5 19.5625"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<IconButton>
|
||||
<CrossedEyeIcon />
|
||||
</IconButton>
|
||||
<IconButton>
|
||||
<CopyIcon />
|
||||
</IconButton>
|
||||
|
||||
<IconButton>
|
||||
<TrashIcon />
|
||||
</IconButton>
|
||||
<Box
|
||||
sx={{
|
||||
borderLeft: upSm ? "1px solid #9A9AAF" : "none",
|
||||
pl: upSm ? "2px" : 0,
|
||||
height: "50%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<IconButton>
|
||||
<CountIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<IconButton>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
</>
|
||||
) : (
|
||||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
|
||||
<path
|
||||
d="M7.5 19.5625L15 12.0625L22.5 19.5625"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
{isExpanded && (
|
||||
<Box
|
||||
sx={{
|
||||
px: "20px",
|
||||
py: upMd ? "25px" : undefined,
|
||||
pt: upMd ? undefined : "15px",
|
||||
pb: upMd ? undefined : "25px",
|
||||
backgroundColor: "#F1F2F6",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: upMd ? undefined : "16px",
|
||||
lineHeight: upMd ? undefined : "19px",
|
||||
color: theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
desc
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
width: upSm ? "195px" : "123px",
|
||||
marginRight: upSm ? "65px" : 0,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.grey3.main,
|
||||
fontSize: upSm ? "20px" : "16px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
10 руб.
|
||||
</Typography>
|
||||
{upSm ? (
|
||||
<Typography
|
||||
component="div"
|
||||
sx={{
|
||||
color: theme.palette.text.secondary,
|
||||
borderBottom: `1px solid ${theme.palette.text.secondary}`,
|
||||
width: "max-content",
|
||||
lineHeight: "19px",
|
||||
cursor: "pointer",
|
||||
"&:active": {
|
||||
color: "#FB5607",
|
||||
borderBottomColor: "#FB5607",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Удалить
|
||||
</Typography>
|
||||
) : (
|
||||
<SvgIcon component={ClearIcon}></SvgIcon>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
86
src/components/DescriptionForm/ButtinsOptionsForm.tsx
Normal file
86
src/components/DescriptionForm/ButtinsOptionsForm.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
|
||||
import React from "react";
|
||||
import SettingIcon from "@icons/questionsPage/settingIcon";
|
||||
import Clue from "@icons/questionsPage/clue";
|
||||
import Branching from "@icons/questionsPage/branching";
|
||||
import { Box, IconButton, useTheme } from "@mui/material";
|
||||
import HideIcon from "@icons/questionsPage/hideIcon";
|
||||
import CopyIcon from "@icons/questionsPage/CopyIcon";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
import StarIconPoints from "./StarIconsPoints";
|
||||
|
||||
interface Props {
|
||||
switchState: string;
|
||||
SSHC: (data: string) => void;
|
||||
}
|
||||
|
||||
export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
|
||||
const theme = useTheme();
|
||||
const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
|
||||
{
|
||||
icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
|
||||
title: "Настройки",
|
||||
value: "setting",
|
||||
},
|
||||
{
|
||||
icon: <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />,
|
||||
title: "Ветвление",
|
||||
value: "branching",
|
||||
},
|
||||
{
|
||||
icon: <StarIconPoints color={switchState === "Points" ? "#ffffff" : theme.palette.grey3.main} />,
|
||||
title: "Баллы",
|
||||
value: "points",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
background: "#F2F3F7",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
{buttonSetting.map((e, i) => (
|
||||
<MiniButtonSetting
|
||||
key={i}
|
||||
onClick={() => {
|
||||
SSHC(e.value);
|
||||
}}
|
||||
sx={{
|
||||
backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : "transparent",
|
||||
color: switchState === e.value ? "#ffffff" : theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
{e.icon}
|
||||
{e.title}
|
||||
</MiniButtonSetting>
|
||||
))}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
}}
|
||||
>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<HideIcon />
|
||||
</IconButton>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<CopyIcon />
|
||||
</IconButton>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
193
src/components/DescriptionForm/DescriptionForm.tsx
Normal file
193
src/components/DescriptionForm/DescriptionForm.tsx
Normal file
@ -0,0 +1,193 @@
|
||||
import { useState } from "react";
|
||||
import { Box, IconButton, TextField, Typography } from "@mui/material";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
import CustomButton from "../CustomButton";
|
||||
|
||||
import PriceButtons from "./PriceButton";
|
||||
import DiscountButtons from "./DiscountButtons";
|
||||
import ButtonsOptions from "../../pages/Questions/ButtonsOptions";
|
||||
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
|
||||
import OneIcon from "@icons/questionsPage/OneIcon";
|
||||
import PointsIcon from "@icons/questionsPage/PointsIcon";
|
||||
import ImageAndVideoButtons from "./ImageAndVideoButtons";
|
||||
import Info from "@icons/Info";
|
||||
import SwitchAnswerOptions from "./SwitchAnswerOptions";
|
||||
import ButtonsOptionsForm from "./ButtinsOptionsForm";
|
||||
|
||||
export default function DescriptionForm() {
|
||||
const [switchState, setSwitchState] = useState("setting");
|
||||
const [callToAction, setCallToAction] = useState<boolean>(false);
|
||||
const [priceButtonsActive, setPriceButtonsActive] = useState<number>(0);
|
||||
const [priceButtonsType, setPriceButtonsType] = useState<string>();
|
||||
const [forwarding, setForwarding] = useState<boolean>(false);
|
||||
|
||||
const ButtonsActive = (index: number, type: string) => {
|
||||
setPriceButtonsActive(index);
|
||||
setPriceButtonsType(type);
|
||||
};
|
||||
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "796px",
|
||||
height: "100%",
|
||||
bgcolor: "#FFFFFF",
|
||||
borderRadius: "12px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ p: "0 20px", pt: "30px" }}>
|
||||
<Box sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", mb: "19px" }}>
|
||||
<CustomTextField placeholder="Заголовок вопроса" text={""} />
|
||||
<IconButton>
|
||||
<ExpandMoreIcon />
|
||||
</IconButton>
|
||||
<OneIcon />
|
||||
<PointsIcon />
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<PriceButtons ButtonsActive={ButtonsActive} priceButtonsActive={priceButtonsActive} />
|
||||
<DiscountButtons />
|
||||
</Box>
|
||||
|
||||
<TextField
|
||||
// value={text}
|
||||
|
||||
fullWidth
|
||||
placeholder="Описание"
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "100%",
|
||||
height: "110px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<ImageAndVideoButtons />
|
||||
{priceButtonsType === "smooth" ? (
|
||||
<Box sx={{ mb: "20px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
|
||||
<Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
|
||||
Призыв к действию
|
||||
</Typography>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<TextField
|
||||
// value={text}
|
||||
placeholder="Узнать подробнее"
|
||||
fullWidth
|
||||
sx={{
|
||||
width: "410px",
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "410px",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<CustomButton
|
||||
onClick={() => setForwarding(true)}
|
||||
variant="contained"
|
||||
sx={{
|
||||
display: forwarding ? "none" : "",
|
||||
ml: "20px",
|
||||
mb: "20px",
|
||||
color: "#9A9AAF",
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "194px",
|
||||
height: "48px",
|
||||
border: "1px solid #9A9AAF",
|
||||
}}
|
||||
>
|
||||
Переадрисация +
|
||||
</CustomButton>
|
||||
{forwarding ? (
|
||||
<Box sx={{ ml: "20px", mt: "-36px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
|
||||
<Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
|
||||
Переадресация
|
||||
</Typography>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
<Info />
|
||||
</Box>
|
||||
<Box>
|
||||
<TextField
|
||||
// value={text}
|
||||
placeholder="https://exemple.ru"
|
||||
fullWidth
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "326px",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<CustomButton
|
||||
onClick={() => setCallToAction(true)}
|
||||
variant="contained"
|
||||
sx={{
|
||||
mb: "20px",
|
||||
color: "#9A9AAF",
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "119px",
|
||||
height: "48px",
|
||||
border: "1px solid #9A9AAF",
|
||||
}}
|
||||
>
|
||||
Кнопка +
|
||||
</CustomButton>
|
||||
)}
|
||||
</Box>
|
||||
<ButtonsOptionsForm switchState={switchState} SSHC={SSHC} />
|
||||
<SwitchAnswerOptions switchState={switchState} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
58
src/components/DescriptionForm/DiscountButtons.tsx
Normal file
58
src/components/DescriptionForm/DiscountButtons.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
import { Box, IconButton, Typography } from "@mui/material";
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
|
||||
export default function DiscountButtons() {
|
||||
return (
|
||||
<Box sx={{ ml: "40px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
|
||||
<Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
|
||||
Скидка
|
||||
</Typography>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box component="div" sx={{ mb: "20px" }}>
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
color: "#9A9AAF",
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "86px",
|
||||
height: "48px",
|
||||
border: "1px solid #9A9AAF",
|
||||
}}
|
||||
>
|
||||
10000
|
||||
</CustomButton>
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
color: "#FFFF",
|
||||
backgroundColor: "#7E2AEA",
|
||||
width: "53px",
|
||||
height: "48px",
|
||||
ml: "8px",
|
||||
border: "1px solid #9A9AAF",
|
||||
}}
|
||||
>
|
||||
₽
|
||||
</CustomButton>
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
color: "#9A9AAF",
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "53px",
|
||||
height: "48px",
|
||||
ml: "8px",
|
||||
border: "1px solid #9A9AAF",
|
||||
}}
|
||||
>
|
||||
%
|
||||
</CustomButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
35
src/components/DescriptionForm/ImageAndVideoButtons.tsx
Normal file
35
src/components/DescriptionForm/ImageAndVideoButtons.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
|
||||
import AddImage from "@icons/questionsPage/addImage";
|
||||
import AddVideofile from "@icons/questionsPage/addVideofile";
|
||||
|
||||
export default function ImageAndVideoButtons() {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "12px", mt: "20px", mb: "20px" }}>
|
||||
<AddImage />
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: "16px",
|
||||
lineHeight: "18.96px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Изображение
|
||||
</Typography>
|
||||
<Typography> или</Typography>
|
||||
<AddVideofile />
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: "16px",
|
||||
lineHeight: "18.96px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Видео
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
237
src/components/DescriptionForm/PointsQuestions.tsx
Normal file
237
src/components/DescriptionForm/PointsQuestions.tsx
Normal file
@ -0,0 +1,237 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
Link,
|
||||
MenuItem,
|
||||
Modal,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Select,
|
||||
SelectChangeEvent,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import * as React from "react";
|
||||
import InfoIcon from "@icons/InfoIcon";
|
||||
import ArrowDown from "@icons/ArrowDownIcon";
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
import { useState } from "react";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
|
||||
export default function PointsQuestions() {
|
||||
const theme = useTheme();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [condition, setCondition] = useState<boolean>(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [display, setDisplay] = React.useState("1");
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setDisplay(event.target.value);
|
||||
};
|
||||
|
||||
const [value, setValue] = React.useState("1");
|
||||
|
||||
const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue((event.target as HTMLInputElement).value);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Button 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: "620px",
|
||||
width: "100%",
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: "12px",
|
||||
|
||||
boxShadow: 24,
|
||||
p: 0,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "30px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
gap: "20px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ mb: "14px" }}>Показать, если количество баллов</Typography>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<FormControl
|
||||
fullWidth
|
||||
size="small"
|
||||
sx={{
|
||||
width: "282px",
|
||||
maxWidth: "140px",
|
||||
height: "48px",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
id="display-select"
|
||||
variant="outlined"
|
||||
value={display}
|
||||
displayEmpty
|
||||
onChange={handleChange}
|
||||
sx={{
|
||||
width: "282px",
|
||||
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} />}
|
||||
>
|
||||
<MenuItem
|
||||
value={1}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Больше
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
value={2}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Меньше
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
value={3}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Между
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
value={4}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Ровно
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
// value={text}
|
||||
placeholder="100"
|
||||
fullWidth
|
||||
sx={{
|
||||
ml: "160px",
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "282px",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
|
||||
<CustomButton
|
||||
onClick={() => handleClose()}
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
color: "white",
|
||||
width: "auto",
|
||||
px: "20px",
|
||||
py: "9px",
|
||||
}}
|
||||
>
|
||||
Готово
|
||||
</CustomButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
93
src/components/DescriptionForm/PriceButton.tsx
Normal file
93
src/components/DescriptionForm/PriceButton.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
import { Box, IconButton, SxProps, Theme, Typography } from "@mui/material";
|
||||
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
|
||||
const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] = [
|
||||
{
|
||||
title: "10000 ₽",
|
||||
type: "10000 ₽",
|
||||
sx: {
|
||||
width: "110px",
|
||||
height: "48px",
|
||||
border: "1px solid #9A9AAF",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Ровно",
|
||||
type: "smooth",
|
||||
sx: {
|
||||
width: "94px",
|
||||
height: "48px",
|
||||
ml: "8px",
|
||||
border: "1px solid #9A9AAF",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "От и до",
|
||||
type: "fromAndTo",
|
||||
sx: {
|
||||
width: "93px",
|
||||
height: "48px",
|
||||
ml: "8px",
|
||||
border: "1px solid #9A9AAF",
|
||||
whiteSpace: "nowrap",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "ƒ",
|
||||
type: "ƒ",
|
||||
sx: {
|
||||
width: "38px",
|
||||
height: "48px",
|
||||
ml: "8px",
|
||||
border: "1px solid #9A9AAF",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Скидка",
|
||||
type: "discount",
|
||||
sx: {
|
||||
width: "93px",
|
||||
height: "48px",
|
||||
border: "1px solid #9A9AAF",
|
||||
ml: "8px",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
type Props = {
|
||||
ButtonsActive: (index: number, type: string) => void;
|
||||
priceButtonsActive: number | undefined;
|
||||
};
|
||||
|
||||
export default function PriceButtons({ ButtonsActive, priceButtonsActive }: Props) {
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
|
||||
<Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
|
||||
Стоимость
|
||||
</Typography>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box component="div" sx={{ mb: "20px" }}>
|
||||
{priceButtonsArray.map(({ title, type, sx }, index) => (
|
||||
<CustomButton
|
||||
onClick={() => ButtonsActive(index, type)}
|
||||
key={title}
|
||||
sx={{
|
||||
bgcolor: priceButtonsActive === index ? "#7E2AEA" : "#F2F3F7",
|
||||
color: priceButtonsActive === index ? "#FFFF" : "#9A9AAF",
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</CustomButton>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
24
src/components/DescriptionForm/StarIconsPoints.tsx
Normal file
24
src/components/DescriptionForm/StarIconsPoints.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function StarIconPoints({ color }: Props) {
|
||||
return (
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7 9.24452L5.1458 10.2695L5.5 8.09854L4 6.56119L6.0729 6.24468L7 4.26953L7.9271 6.24468L10 6.56119L8.5 8.09854L8.8542 10.2695L7 9.24452Z"
|
||||
stroke={color}
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M1 7.26953C1 10.5832 3.68629 13.2695 7 13.2695C10.3137 13.2695 13 10.5832 13 7.26953C13 3.95582 10.3137 1.26953 7 1.26953C3.68629 1.26953 1 3.95582 1 7.26953Z"
|
||||
stroke={color}
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
53
src/components/DescriptionForm/SwitchAnswerOptions.tsx
Normal file
53
src/components/DescriptionForm/SwitchAnswerOptions.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import Info from "@icons/Info";
|
||||
import { Box, TextField } from "@mui/material";
|
||||
import BranchingQuestions from "../../pages/Questions/branchingQuestions";
|
||||
import PointsQuestions from "./PointsQuestions";
|
||||
|
||||
interface Props {
|
||||
switchState: string;
|
||||
}
|
||||
|
||||
function ResponseSettings() {
|
||||
return (
|
||||
<Box sx={{ display: "flex", p: "0 20px", pt: "30px", pb: "20px" }}>
|
||||
<TextField
|
||||
// value={text}
|
||||
placeholder="Узнать подробнее"
|
||||
fullWidth
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "640px",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Info />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SwitchAnswerOptions({ switchState = "setting" }: Props) {
|
||||
switch (switchState) {
|
||||
case "setting":
|
||||
return <ResponseSettings />;
|
||||
break;
|
||||
case "branching":
|
||||
return <BranchingQuestions />;
|
||||
break;
|
||||
case "points":
|
||||
return <PointsQuestions />;
|
||||
break;
|
||||
default:
|
||||
return <></>;
|
||||
}
|
||||
}
|
||||
196
src/components/ResultListPage.tsx
Normal file
196
src/components/ResultListPage.tsx
Normal file
@ -0,0 +1,196 @@
|
||||
import { Box, IconButton, TextField, Typography } from "@mui/material";
|
||||
import { SelectIconButton } from "../pages/Questions/OptionsPicture/settingOpytionsPict";
|
||||
import { useState } from "react";
|
||||
|
||||
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";
|
||||
|
||||
export default function ResultListPage() {
|
||||
const [alignType, setAlignType] = useState<"left" | "right">("left");
|
||||
const [proportions, setProportions] = useState<"oneOne" | "twoOne" | "oneTwo">("oneOne");
|
||||
return (
|
||||
<Box sx={{ width: "796px", mb: "30px" }}>
|
||||
<Box
|
||||
sx={{
|
||||
height: "100%",
|
||||
bgcolor: "#FFFFFF",
|
||||
borderRadius: "12px",
|
||||
p: "30px 20px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: "#9A9AAF" }}>Показывать результат</Typography>
|
||||
<IconButton>
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="30" height="30" rx="6" fill="#EEE4FC" />
|
||||
<path
|
||||
d="M22.5 11.25L15 18.75L7.5 11.25"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<Box>
|
||||
<Typography sx={{ mb: "14px" }}>Форма</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
<SelectIconButton
|
||||
onClick={() => setAlignType("left")}
|
||||
isActive={alignType === "left"}
|
||||
Icon={FormatIcon2}
|
||||
/>
|
||||
<SelectIconButton
|
||||
onClick={() => setAlignType("right")}
|
||||
isActive={alignType === "right"}
|
||||
Icon={FormatIcon1}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ ml: "40px" }}>
|
||||
<Typography sx={{ mb: "14px" }}>Пропорции</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
<SelectIconButton
|
||||
onClick={() => setProportions("oneOne")}
|
||||
isActive={proportions === "oneOne"}
|
||||
Icon={ProportionsIcon11}
|
||||
/>
|
||||
<SelectIconButton
|
||||
onClick={() => setProportions("twoOne")}
|
||||
isActive={proportions === "twoOne"}
|
||||
Icon={ProportionsIcon21}
|
||||
/>
|
||||
<SelectIconButton
|
||||
onClick={() => setProportions("oneTwo")}
|
||||
isActive={proportions === "oneTwo"}
|
||||
Icon={ProportionsIcon12}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: "20px" }}>
|
||||
<Typography sx={{ pb: "14px" }} component="p">
|
||||
Заголовок
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Ваши результаты"
|
||||
fullWidth
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "100%",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ mb: "20px" }}>
|
||||
<Typography sx={{ pb: "14px" }} component="p">
|
||||
Текст
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Ваши результаты"
|
||||
fullWidth
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "100%",
|
||||
height: "69px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography sx={{ pb: "14px" }} component="p">
|
||||
Кнопка на результате
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Ваши результаты"
|
||||
fullWidth
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "100%",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</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>
|
||||
<Info />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
105
src/components/ResultSetting.tsx
Normal file
105
src/components/ResultSetting.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
import { Box, Button, Typography, useTheme } from "@mui/material";
|
||||
|
||||
import CustomWrapper from "./CustomWrapper";
|
||||
import CustomButton from "./CustomButton";
|
||||
import BackButton from "./Button/BackButton";
|
||||
|
||||
import Plus from "@icons/Plus";
|
||||
import Info from "@icons/Info";
|
||||
import IconPlus from "@icons/IconPlus";
|
||||
import SettingForm from "./SettingForm";
|
||||
import DescriptionForm from "./DescriptionForm/DescriptionForm";
|
||||
import ResultListPage from "./ResultListPage";
|
||||
type Props = {
|
||||
setSettings: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
export default function ResultSetting({ setSettings }: Props) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box sx={{ width: "796px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
|
||||
<Typography sx={{ pr: "10px" }} variant="h5">
|
||||
Настройки результатов
|
||||
</Typography>
|
||||
<Info />
|
||||
<Button
|
||||
onClick={() => setSettings(false)}
|
||||
disableRipple
|
||||
sx={{
|
||||
ml: "auto",
|
||||
width: "73px",
|
||||
height: "19px",
|
||||
color: "#7E2AEA",
|
||||
textDecoration: "underline",
|
||||
fontSize: "16px",
|
||||
"&:hover": {
|
||||
background: "none",
|
||||
textDecoration: "underline",
|
||||
},
|
||||
}}
|
||||
variant="text"
|
||||
>
|
||||
Свернуть
|
||||
</Button>
|
||||
</Box>
|
||||
<CustomWrapper sx={{ mt: "30px" }} text="Показывать результат" />
|
||||
<CustomWrapper sx={{ mt: "30px" }} text="Настройки почты" />
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}>
|
||||
<Typography variant="p1" sx={{ color: "#4D4D4D", fontSize: "14px" }}>
|
||||
Создайте результат
|
||||
</Typography>
|
||||
<Button
|
||||
disableRipple
|
||||
sx={{
|
||||
ml: "auto",
|
||||
height: "19px",
|
||||
color: "#7E2AEA",
|
||||
textDecoration: "underline",
|
||||
fontSize: "16px",
|
||||
|
||||
"&:hover": {
|
||||
background: "none",
|
||||
textDecoration: "underline",
|
||||
},
|
||||
}}
|
||||
variant="text"
|
||||
>
|
||||
Развернуть все
|
||||
</Button>
|
||||
</Box>
|
||||
<CustomWrapper result={true} text="Показывать результат" />
|
||||
<Box sx={{ width: "850px", display: "flex", alignItems: "center" }}>
|
||||
<Typography sx={{ color: "#7E2AEA", cursor: "default" }}>
|
||||
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
- - - - - - -
|
||||
<IconPlus />
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<CustomWrapper result={true} text="Настройки почты" />
|
||||
<Box sx={{ pt: "30px", display: "flex", alignItems: "center" }}>
|
||||
<Plus />
|
||||
<Typography component="div" sx={{ ml: "auto" }}>
|
||||
<BackButton />
|
||||
<CustomButton
|
||||
onClick={() => setSettings(true)}
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
width: "194px",
|
||||
height: "44px",
|
||||
ml: "10px",
|
||||
}}
|
||||
>
|
||||
Настроить форму
|
||||
</CustomButton>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<SettingForm />
|
||||
<ResultListPage />
|
||||
<DescriptionForm />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
128
src/components/SettingForm.tsx
Normal file
128
src/components/SettingForm.tsx
Normal file
@ -0,0 +1,128 @@
|
||||
import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
|
||||
|
||||
import Info from "@icons/Info";
|
||||
import CustomButton from "./CustomButton";
|
||||
import SwichResult from "./SwichResult";
|
||||
|
||||
import listChecks from "../assets/icon/listChecks.svg";
|
||||
import ShareNetwork from "../assets/icon/ShareNetwork.svg";
|
||||
import ArrowCounterClockWise from "../assets/icon/ArrowCounterClockWise.svg";
|
||||
import { useState } from "react";
|
||||
|
||||
const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
|
||||
{
|
||||
sx: { backgroundColor: "#7E2AEA", color: "white", width: "237px", height: "44px" },
|
||||
title: "До формы контактов",
|
||||
type: "toContactForm",
|
||||
},
|
||||
{
|
||||
sx: { backgroundColor: "#F2F3F7", color: "#9A9AAF", width: "266px", height: "44px", border: "1px solid #9A9AAF" },
|
||||
title: "После формы контактов",
|
||||
type: "afterСontactForm",
|
||||
},
|
||||
{
|
||||
sx: { color: "#9A9AAF", backgroundColor: "#F2F3F7", width: "233px", height: "44px", border: "1px solid #9A9AAF" },
|
||||
title: "Отправить на E-mail",
|
||||
type: "e-mail",
|
||||
},
|
||||
];
|
||||
|
||||
export default function SettingForm() {
|
||||
const [activeIndex, setActiveIndex] = useState<number>();
|
||||
const [typeActive, setTypeActive] = useState<string>();
|
||||
|
||||
const active = (index: number, type: string) => {
|
||||
setActiveIndex(index);
|
||||
setTypeActive(type);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ width: "796px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
|
||||
<Typography sx={{ pr: "10px" }} variant="h5">
|
||||
Настройки результатов
|
||||
</Typography>
|
||||
<Info />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
height: "100%",
|
||||
bgcolor: "#FFFFFF",
|
||||
borderRadius: "12px",
|
||||
p: "30px 20px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: "#9A9AAF" }}>Показывать результат</Typography>
|
||||
<IconButton>
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="30" height="30" rx="6" fill="#EEE4FC" />
|
||||
<path
|
||||
d="M22.5 11.25L15 18.75L7.5 11.25"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", mb: "20px" }}>
|
||||
{buttonSetting.map(({ sx, title, type }, index) => (
|
||||
<CustomButton
|
||||
disableRipple
|
||||
onClick={() => active(index, type)}
|
||||
key={title}
|
||||
sx={{
|
||||
...sx,
|
||||
bgcolor: activeIndex === index ? " #7E2AEA" : "#F2F3F7",
|
||||
color: activeIndex === index ? " white" : "#9A9AAF",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</CustomButton>
|
||||
))}
|
||||
</Box>
|
||||
{typeActive === "e-mail" ? (
|
||||
<SwichResult icon={listChecks} text="Показывать несколько результатов" />
|
||||
) : (
|
||||
<>
|
||||
<SwichResult icon={listChecks} text="Показывать несколько результатов" />
|
||||
<SwichResult icon={ShareNetwork} text="Поделиться результатами" />
|
||||
<SwichResult icon={ArrowCounterClockWise} text="Кнопка `Пройти тест заново`" />
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}>
|
||||
<Typography variant="p1" sx={{ color: "#4D4D4D", fontSize: "14px" }}>
|
||||
Создайте результат
|
||||
</Typography>
|
||||
<Button
|
||||
disableRipple
|
||||
sx={{
|
||||
ml: "auto",
|
||||
height: "19px",
|
||||
color: "#7E2AEA",
|
||||
textDecoration: "underline",
|
||||
fontSize: "16px",
|
||||
|
||||
"&:hover": {
|
||||
background: "none",
|
||||
textDecoration: "underline",
|
||||
},
|
||||
}}
|
||||
variant="text"
|
||||
>
|
||||
Свернуть всё
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
44
src/components/SwichResult.tsx
Normal file
44
src/components/SwichResult.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import { Box, IconButton, Typography } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
|
||||
type Props = {
|
||||
text: string;
|
||||
icon: any;
|
||||
};
|
||||
export default function SwichResult({ text, icon }: Props) {
|
||||
const [active, setActive] = useState<boolean>(false);
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
p: "14px",
|
||||
mb: "14px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
border: "1px solid #9A9AAF",
|
||||
borderRadius: "8px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "left" }}>
|
||||
<img src={icon} alt="icon" />
|
||||
<Typography sx={{ color: "#9A9AAF", ml: "14px" }}>{text}</Typography>
|
||||
</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"}
|
||||
stroke-width="2"
|
||||
/>
|
||||
</svg>
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
20
src/components/icons/CopyIcon.tsx
Normal file
20
src/components/icons/CopyIcon.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
export default function CopyIcon() {
|
||||
return (
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M15.75 16.5625H20.25V4.5625H8.25V9.0625"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.75 9.0625H3.75V21.0625H15.75V9.0625Z"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
11
src/components/icons/CountIcon.tsx
Normal file
11
src/components/icons/CountIcon.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
export default function CountIcon() {
|
||||
return (
|
||||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.8125" width="30" height="30" rx="15" fill="#EEE4FC" />
|
||||
<path
|
||||
d="M15.864 20.3125C15.7707 20.3125 15.6913 20.2845 15.626 20.2285C15.57 20.1632 15.542 20.0838 15.542 19.9905V12.1505L13.218 13.9425C13.1433 13.9985 13.064 14.0218 12.98 14.0125C12.896 14.0032 12.826 13.9612 12.77 13.8865L12.406 13.4245C12.35 13.3405 12.3267 13.2565 12.336 13.1725C12.3547 13.0885 12.4013 13.0185 12.476 12.9625L15.528 10.6105C15.5933 10.5638 15.654 10.5358 15.71 10.5265C15.766 10.5172 15.8267 10.5125 15.892 10.5125H16.606C16.6993 10.5125 16.774 10.5452 16.83 10.6105C16.886 10.6665 16.914 10.7412 16.914 10.8345V19.9905C16.914 20.0838 16.886 20.1632 16.83 20.2285C16.774 20.2845 16.6993 20.3125 16.606 20.3125H15.864Z"
|
||||
fill="#7E2AEA"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
42
src/components/icons/CrossedEyeIcon.tsx
Normal file
42
src/components/icons/CrossedEyeIcon.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
export default function CrossedEyeIcon() {
|
||||
return (
|
||||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
|
||||
<path
|
||||
d="M7.5 7.5625L22.5 24.0625"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.5215 18.5871C16.8333 19.2175 15.9329 19.5657 14.9996 19.5621C14.2427 19.562 13.5036 19.3329 12.8794 18.9049C12.2551 18.4769 11.775 17.87 11.5022 17.164C11.2293 16.458 11.1765 15.686 11.3506 14.9494C11.5247 14.2128 11.9176 13.5462 12.4777 13.0371"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.9375 10.2441C6.1125 12.1754 4.5 15.8129 4.5 15.8129C4.5 15.8129 7.5 22.5629 15 22.5629C16.7574 22.5772 18.4929 22.1723 20.0625 21.3816"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M22.5594 19.6656C24.6031 17.8375 25.5031 15.8125 25.5031 15.8125C25.5031 15.8125 22.5031 9.06252 15.0031 9.06252C14.3529 9.06124 13.7038 9.11455 13.0625 9.2219"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.7031 12.1289C16.5006 12.28 17.2273 12.6864 17.7735 13.2868C18.3198 13.8871 18.6559 14.6489 18.7313 15.457"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
16
src/components/icons/IconPlus.tsx
Normal file
16
src/components/icons/IconPlus.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { IconButton } from "@mui/material";
|
||||
|
||||
export default function IconPlus() {
|
||||
return (
|
||||
<IconButton>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M18 0H6C2.68629 0 0 2.68629 0 6V18C0 21.3137 2.68629 24 6 24H18C21.3137 24 24 21.3137 24 18V6C24 2.68629 21.3137 0 18 0Z"
|
||||
fill="#7E2AEA"
|
||||
/>
|
||||
<path d="M3.75 12H20.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M12 3.75V20.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
28
src/components/icons/Info.tsx
Normal file
28
src/components/icons/Info.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { IconButton } from "@mui/material";
|
||||
|
||||
export default function Info() {
|
||||
return (
|
||||
<IconButton>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.25 9.25H10V14.5H10.75"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.8125 7C10.4338 7 10.9375 6.49632 10.9375 5.875C10.9375 5.25368 10.4338 4.75 9.8125 4.75C9.19118 4.75 8.6875 5.25368 8.6875 5.875C8.6875 6.49632 9.19118 7 9.8125 7Z"
|
||||
fill="#7E2AEA"
|
||||
/>
|
||||
</svg>
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
31
src/components/icons/MenuIcon.tsx
Normal file
31
src/components/icons/MenuIcon.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
export default function MenuIcon() {
|
||||
return (
|
||||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.8125" width="30" height="30" rx="6" fill="#333647" />
|
||||
<path
|
||||
d="M10.5 8.8125C11.3284 8.8125 12 8.14093 12 7.3125C12 6.48407 11.3284 5.8125 10.5 5.8125C9.67157 5.8125 9 6.48407 9 7.3125C9 8.14093 9.67157 8.8125 10.5 8.8125Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M19.5 8.8125C20.3284 8.8125 21 8.14093 21 7.3125C21 6.48407 20.3284 5.8125 19.5 5.8125C18.6716 5.8125 18 6.48407 18 7.3125C18 8.14093 18.6716 8.8125 19.5 8.8125Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M10.5 17.3125C11.3284 17.3125 12 16.6409 12 15.8125C12 14.9841 11.3284 14.3125 10.5 14.3125C9.67157 14.3125 9 14.9841 9 15.8125C9 16.6409 9.67157 17.3125 10.5 17.3125Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M19.5 17.3125C20.3284 17.3125 21 16.6409 21 15.8125C21 14.9841 20.3284 14.3125 19.5 14.3125C18.6716 14.3125 18 14.9841 18 15.8125C18 16.6409 18.6716 17.3125 19.5 17.3125Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M10.5 25.8125C11.3284 25.8125 12 25.1409 12 24.3125C12 23.4841 11.3284 22.8125 10.5 22.8125C9.67157 22.8125 9 23.4841 9 24.3125C9 25.1409 9.67157 25.8125 10.5 25.8125Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M19.5 25.8125C20.3284 25.8125 21 25.1409 21 24.3125C21 23.4841 20.3284 22.8125 19.5 22.8125C18.6716 22.8125 18 23.4841 18 24.3125C18 25.1409 18.6716 25.8125 19.5 25.8125Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
13
src/components/icons/Plus.tsx
Normal file
13
src/components/icons/Plus.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { IconButton } from "@mui/material";
|
||||
|
||||
export default function Plus() {
|
||||
return (
|
||||
<IconButton>
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="22" cy="22" r="22" fill="#FB5607" />
|
||||
<path d="M22 10V34" stroke="white" stroke-width="2" />
|
||||
<path d="M10 22H34" stroke="white" stroke-width="2" />
|
||||
</svg>
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
36
src/components/icons/TrashIcon.tsx
Normal file
36
src/components/icons/TrashIcon.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
export default function TrashIcon() {
|
||||
return (
|
||||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.8125" width="30" height="30" rx="6" fill="#333647" />
|
||||
<path d="M23.25 9.0625H6.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path
|
||||
d="M12.75 13.5625V19.5625"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.25 13.5625V19.5625"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M21.75 9.0625V23.3125C21.75 23.5114 21.671 23.7022 21.5303 23.8428C21.3897 23.9835 21.1989 24.0625 21 24.0625H9C8.80109 24.0625 8.61032 23.9835 8.46967 23.8428C8.32902 23.7022 8.25 23.5114 8.25 23.3125V9.0625"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M18.75 9.0625V7.5625C18.75 7.16468 18.592 6.78314 18.3107 6.50184C18.0294 6.22054 17.6478 6.0625 17.25 6.0625H12.75C12.3522 6.0625 11.9706 6.22054 11.6893 6.50184C11.408 6.78314 11.25 7.16468 11.25 7.5625V9.0625"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@ -1,50 +1,47 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import { BrowserRouter, Route, Routes } from 'react-router-dom';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./App";
|
||||
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||
import lightTheme from "./utils/themes/light";
|
||||
import { ThemeProvider } from '@mui/material';
|
||||
import CreateQuiz from './components/CreateQuiz/CreateQuiz';
|
||||
import NavbarCreateQuiz from './components/Navbar/NavbarCreateQuiz';
|
||||
import { ThemeProvider } from "@mui/material";
|
||||
import CreateQuiz from "./components/CreateQuiz/CreateQuiz";
|
||||
import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz";
|
||||
import darkTheme from "./utils/themes/dark";
|
||||
|
||||
import HorizontalLinearStepper from './ui_kit/Stepper';
|
||||
import Create from './pages/createQuize/Create';
|
||||
import Quizes from './pages/createQuize/Quizes';
|
||||
import Projects from './pages/createQuize/Projects';
|
||||
import Gallery from './pages/createQuize/Gallery';
|
||||
import HorizontalLinearStepper from "./ui_kit/Stepper";
|
||||
import Create from "./pages/createQuize/Create";
|
||||
import Quizes from "./pages/createQuize/Quizes";
|
||||
import Projects from "./pages/createQuize/Projects";
|
||||
import Gallery from "./pages/createQuize/Gallery";
|
||||
import StartPage from "./pages/startPage/StartPage";
|
||||
import Main from "./pages/main"
|
||||
import Main from "./pages/main";
|
||||
import FirstQuiz from "./pages/startPage/FirstQuiz";
|
||||
import QuestionsPage from "./pages/Questions/QuestionsPage";
|
||||
import Result from "./pages/Result";
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<BrowserRouter>
|
||||
<React.StrictMode>
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={ <Main /> }>
|
||||
<Route path="/start" element={<FirstQuiz/>} />
|
||||
<Route path="/create" element={<StartPage/>} />
|
||||
<Route path="/questions" element={<QuestionsPage/>} />
|
||||
<Route path="/" element={<Main />}>
|
||||
<Route path="/start" element={<FirstQuiz />} />
|
||||
<Route path="/create" element={<StartPage />} />
|
||||
<Route path="/questions" element={<QuestionsPage />} />
|
||||
<Route path="/result" element={<Result />} />
|
||||
</Route>
|
||||
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</BrowserRouter>
|
||||
</ThemeProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
|
||||
|
||||
// <Route path="/quizes" element={<Quizes/>}/>
|
||||
// <Route path="/projects" element={<Projects/>} />
|
||||
// <Route path="/gallery" element={<Gallery/>} />
|
||||
// <Route path="/create/quiz" element={<><NavbarCreateQuiz /></>} />
|
||||
// <Route path="/create/start" element={<><NavbarCreateQuiz /></>} />
|
||||
// <Route path="/create/settings" element={<><NavbarCreateQuiz /><CreateQuiz /></>} />
|
||||
// <Route path="/create/stepper" element={<><NavbarCreateQuiz /><HorizontalLinearStepper/></>} />
|
||||
// <Route path="/create/stepper" element={<><NavbarCreateQuiz /><HorizontalLinearStepper/></>} />
|
||||
|
||||
@ -3,66 +3,83 @@ import React from "react";
|
||||
import SettingIcon from "@icons/questionsPage/settingIcon";
|
||||
import Clue from "@icons/questionsPage/clue";
|
||||
import Branching from "@icons/questionsPage/branching";
|
||||
import {Box, IconButton, useTheme} from "@mui/material";
|
||||
import { Box, IconButton, useTheme } from "@mui/material";
|
||||
import HideIcon from "@icons/questionsPage/hideIcon";
|
||||
import CopyIcon from "@icons/questionsPage/CopyIcon";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
|
||||
interface Props {
|
||||
switchState: string
|
||||
SSHC: (data:string) => void
|
||||
switchState: string;
|
||||
SSHC: (data: string) => void;
|
||||
}
|
||||
|
||||
export default function ButtonsOptions ({SSHC, switchState}:Props) {
|
||||
const theme = useTheme();
|
||||
const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
|
||||
{icon: <SettingIcon color={switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Настройки', value: 'setting'},
|
||||
{icon: <Clue color={switchState === 'help' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Подсказка', value: 'help'},
|
||||
{icon: <Branching color={switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Ветвление', value: 'branching'},
|
||||
]
|
||||
export default function ButtonsOptions({ SSHC, switchState }: Props) {
|
||||
const theme = useTheme();
|
||||
const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
|
||||
{
|
||||
icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
|
||||
title: "Настройки",
|
||||
value: "setting",
|
||||
},
|
||||
{
|
||||
icon: <Clue color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main} />,
|
||||
title: "Подсказка",
|
||||
value: "help",
|
||||
},
|
||||
{
|
||||
icon: <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />,
|
||||
title: "Ветвление",
|
||||
value: "branching",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
background: '#f2f3f7'
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
padding: '20px',
|
||||
display: 'flex',
|
||||
gap: '10px'
|
||||
}}
|
||||
>
|
||||
{buttonSetting.map( (e,i) => (
|
||||
<MiniButtonSetting
|
||||
key={i}
|
||||
onClick={()=>{SSHC(e.value)}}
|
||||
sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent',
|
||||
color: switchState === e.value ? '#ffffff' : theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
{e.icon}
|
||||
{e.title}
|
||||
</MiniButtonSetting>
|
||||
))}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
padding: '20px',
|
||||
}}
|
||||
>
|
||||
<IconButton sx={{borderRadius: '6px', padding: '2px'}}>
|
||||
<HideIcon/>
|
||||
</IconButton>
|
||||
<IconButton sx={{borderRadius: '6px', padding: '2px'}}>
|
||||
<CopyIcon/>
|
||||
</IconButton>
|
||||
<IconButton sx={{borderRadius: '6px', padding: '2px'}}>
|
||||
<DeleteIcon/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
background: "#F2F3F7",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
{buttonSetting.map((e, i) => (
|
||||
<MiniButtonSetting
|
||||
key={i}
|
||||
onClick={() => {
|
||||
SSHC(e.value);
|
||||
}}
|
||||
sx={{
|
||||
backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : "transparent",
|
||||
color: switchState === e.value ? "#ffffff" : theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
{e.icon}
|
||||
{e.title}
|
||||
</MiniButtonSetting>
|
||||
))}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
}}
|
||||
>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<HideIcon />
|
||||
</IconButton>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<CopyIcon />
|
||||
</IconButton>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,86 +3,99 @@ import React from "react";
|
||||
import SettingIcon from "@icons/questionsPage/settingIcon";
|
||||
import Clue from "@icons/questionsPage/clue";
|
||||
import Branching from "@icons/questionsPage/branching";
|
||||
import {Box, IconButton, useTheme} from "@mui/material";
|
||||
import { Box, IconButton, useTheme } from "@mui/material";
|
||||
import HideIcon from "@icons/questionsPage/hideIcon";
|
||||
import CopyIcon from "@icons/questionsPage/CopyIcon";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
import ImgIcon from "@icons/questionsPage/imgIcon";
|
||||
|
||||
interface Props {
|
||||
switchState: string
|
||||
SSHC: (data:string) => void
|
||||
switchState: string;
|
||||
SSHC: (data: string) => void;
|
||||
}
|
||||
|
||||
export default function ButtonsOptionsAndPict ({SSHC, switchState}:Props) {
|
||||
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
background: '#f2f3f7'
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
padding: '20px',
|
||||
display: 'flex',
|
||||
gap: '10px'
|
||||
}}
|
||||
>
|
||||
<MiniButtonSetting
|
||||
onClick={()=>{SSHC('setting')}}
|
||||
sx={{backgroundColor: switchState === 'setting' ? theme.palette.brightPurple.main : 'transparent',
|
||||
color: switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
<SettingIcon color={switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main}/>
|
||||
Настройки
|
||||
</MiniButtonSetting>
|
||||
<MiniButtonSetting
|
||||
onClick={()=>{SSHC('help')}}
|
||||
sx={{backgroundColor: switchState === 'help' ? theme.palette.brightPurple.main : 'transparent',
|
||||
color: switchState === 'help' ? '#ffffff' : theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
<Clue color={switchState === 'help' ? '#ffffff' : theme.palette.grey3.main}/>
|
||||
Помощь
|
||||
</MiniButtonSetting>
|
||||
<MiniButtonSetting
|
||||
onClick={()=>{SSHC('branching')}}
|
||||
sx={{backgroundColor: switchState === 'branching' ? theme.palette.brightPurple.main : 'transparent',
|
||||
color: switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
<Branching color={switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main}/>
|
||||
Ветвление
|
||||
</MiniButtonSetting>
|
||||
<MiniButtonSetting
|
||||
onClick={()=>{SSHC('image')}}
|
||||
sx={{backgroundColor: switchState === 'image' ? theme.palette.brightPurple.main : 'transparent',
|
||||
color: switchState === 'image' ? '#ffffff' : theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
<ImgIcon color={switchState === 'image' ? '#ffffff' : theme.palette.grey3.main}/>
|
||||
Изображение
|
||||
</MiniButtonSetting>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
padding: '20px',
|
||||
}}
|
||||
>
|
||||
<IconButton sx={{borderRadius: '6px', padding: '2px'}}>
|
||||
<HideIcon/>
|
||||
</IconButton>
|
||||
<IconButton sx={{borderRadius: '6px', padding: '2px'}}>
|
||||
<CopyIcon/>
|
||||
</IconButton>
|
||||
<IconButton sx={{borderRadius: '6px', padding: '2px'}}>
|
||||
<DeleteIcon/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
export default function ButtonsOptionsAndPict({ SSHC, switchState }: Props) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
background: "#f2f3f7",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<MiniButtonSetting
|
||||
onClick={() => {
|
||||
SSHC("setting");
|
||||
}}
|
||||
sx={{
|
||||
backgroundColor: switchState === "setting" ? theme.palette.brightPurple.main : "transparent",
|
||||
color: switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
<SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />
|
||||
Настройки
|
||||
</MiniButtonSetting>
|
||||
<MiniButtonSetting
|
||||
onClick={() => {
|
||||
SSHC("help");
|
||||
}}
|
||||
sx={{
|
||||
backgroundColor: switchState === "help" ? theme.palette.brightPurple.main : "transparent",
|
||||
color: switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
<Clue color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main} />
|
||||
Помощь
|
||||
</MiniButtonSetting>
|
||||
<MiniButtonSetting
|
||||
onClick={() => {
|
||||
SSHC("branching");
|
||||
}}
|
||||
sx={{
|
||||
backgroundColor: switchState === "branching" ? theme.palette.brightPurple.main : "transparent",
|
||||
color: switchState === "branching" ? "#ffffff" : theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
<Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />
|
||||
Ветвление
|
||||
</MiniButtonSetting>
|
||||
<MiniButtonSetting
|
||||
onClick={() => {
|
||||
SSHC("image");
|
||||
}}
|
||||
sx={{
|
||||
backgroundColor: switchState === "image" ? theme.palette.brightPurple.main : "transparent",
|
||||
color: switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
<ImgIcon color={switchState === "image" ? "#ffffff" : theme.palette.grey3.main} />
|
||||
Изображение
|
||||
</MiniButtonSetting>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
}}
|
||||
>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<HideIcon />
|
||||
</IconButton>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<CopyIcon />
|
||||
</IconButton>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import {Box, Typography, useTheme} from "@mui/material";
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import InfoIcon from "@icons/InfoIcon";
|
||||
import {useState} from "react";
|
||||
import { useState } from "react";
|
||||
import FormatIcon2 from "@icons/questionsPage/FormatIcon2";
|
||||
import FormatIcon1 from "@icons/questionsPage/FormatIcon1";
|
||||
import CustomButton from "../../../components/CustomButton";
|
||||
@ -9,83 +9,100 @@ import ProportionsIcon11 from "@icons/questionsPage/ProportionsIcon11";
|
||||
import ProportionsIcon21 from "@icons/questionsPage/ProportionsIcon21";
|
||||
import ProportionsIcon12 from "@icons/questionsPage/ProportionsIcon12";
|
||||
|
||||
|
||||
|
||||
interface Props {
|
||||
Icon: React.ElementType;
|
||||
isActive?: boolean;
|
||||
onClick: () => void;
|
||||
Icon: React.ElementType;
|
||||
isActive?: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<CustomButton
|
||||
onClick={onClick}
|
||||
variant="outlined"
|
||||
startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
|
||||
sx={{
|
||||
backgroundColor: isActive ? theme.palette.brightPurple.main : '#eee4fc',
|
||||
borderRadius: 0,
|
||||
border: 'none',
|
||||
color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
|
||||
p: "7px",
|
||||
width: "auto",
|
||||
minWidth: 0,
|
||||
"& .MuiButton-startIcon": {
|
||||
mr: 0,
|
||||
ml: 0,
|
||||
},
|
||||
"&:hover": {
|
||||
borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<CustomButton
|
||||
onClick={onClick}
|
||||
variant="outlined"
|
||||
startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
|
||||
sx={{
|
||||
backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",
|
||||
borderRadius: 0,
|
||||
border: "none",
|
||||
color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
|
||||
p: "7px",
|
||||
width: "auto",
|
||||
minWidth: 0,
|
||||
"& .MuiButton-startIcon": {
|
||||
mr: 0,
|
||||
ml: 0,
|
||||
},
|
||||
"&:hover": {
|
||||
borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
type Proportions = "oneOne" | "twoOne" | "oneTwo";
|
||||
type AlignType = "left" | "right";
|
||||
|
||||
export default function SettingOpytionsPict() {
|
||||
const [proportions, setProportions] = useState<Proportions>("oneOne");
|
||||
const [alignType, setAlignType] = useState<AlignType>("left");
|
||||
|
||||
const [proportions, setProportions] = useState<Proportions>("oneOne");
|
||||
const [alignType, setAlignType] = useState<AlignType>("left");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{display: 'flex'}}>
|
||||
<Box sx={{padding: '20px'}}>
|
||||
<Typography sx={{marginBottom: '15px'}}>Пропорции</Typography>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
marginBottom: '20px'
|
||||
}}>
|
||||
<SelectIconButton onClick={() => setProportions("oneOne")} isActive={proportions === "oneOne"} Icon={ProportionsIcon11} />
|
||||
<SelectIconButton onClick={() => setProportions("twoOne")} isActive={proportions === "twoOne"} Icon={ProportionsIcon21} />
|
||||
<SelectIconButton onClick={() => setProportions("oneTwo")} isActive={proportions === "oneTwo"} Icon={ProportionsIcon12} />
|
||||
</Box>
|
||||
<Typography sx={{marginBottom: '15px'}}>Настройки ответов</Typography>
|
||||
<CustomCheckbox label={'Можно несколько'}/>
|
||||
<CustomCheckbox label={'Большие картинки'}/>
|
||||
<CustomCheckbox label={'Вариант "свой ответ"'}/>
|
||||
</Box>
|
||||
<Box sx={{padding: '20px'}}>
|
||||
<Typography sx={{marginBottom: '15px'}}>Форма</Typography>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
marginBottom: '20px'
|
||||
}}>
|
||||
<SelectIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={FormatIcon2} />
|
||||
<SelectIconButton onClick={() => setAlignType("right")} isActive={alignType === "right"} Icon={FormatIcon1} />
|
||||
</Box>
|
||||
<Typography sx={{marginBottom: '15px'}}>Настройки вопросов</Typography>
|
||||
<CustomCheckbox label={'Необязательный вопрос'}/>
|
||||
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Typography sx={{ marginBottom: "15px" }}>Пропорции</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
<SelectIconButton
|
||||
onClick={() => setProportions("oneOne")}
|
||||
isActive={proportions === "oneOne"}
|
||||
Icon={ProportionsIcon11}
|
||||
/>
|
||||
<SelectIconButton
|
||||
onClick={() => setProportions("twoOne")}
|
||||
isActive={proportions === "twoOne"}
|
||||
Icon={ProportionsIcon21}
|
||||
/>
|
||||
<SelectIconButton
|
||||
onClick={() => setProportions("oneTwo")}
|
||||
isActive={proportions === "oneTwo"}
|
||||
Icon={ProportionsIcon12}
|
||||
/>
|
||||
</Box>
|
||||
<Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
|
||||
<CustomCheckbox label={"Можно несколько"} />
|
||||
<CustomCheckbox label={"Большие картинки"} />
|
||||
<CustomCheckbox label={'Вариант "свой ответ"'} />
|
||||
</Box>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Typography sx={{ marginBottom: "15px" }}>Форма</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
<SelectIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={FormatIcon2} />
|
||||
<SelectIconButton
|
||||
onClick={() => setAlignType("right")}
|
||||
isActive={alignType === "right"}
|
||||
Icon={FormatIcon1}
|
||||
/>
|
||||
</Box>
|
||||
<Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
|
||||
<CustomCheckbox label={"Необязательный вопрос"} />
|
||||
<CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {Box, Typography, useTheme} from "@mui/material";
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
import ButtonsOptions from "../ButtonsOptions";
|
||||
import React from "react";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
@ -6,44 +6,60 @@ import AddImage from "@icons/questionsPage/addImage";
|
||||
import AddVideofile from "@icons/questionsPage/addVideofile";
|
||||
import SwitchPageOptions from "./switchPageOptions";
|
||||
|
||||
export default function PageOptions() {
|
||||
const theme = useTheme();
|
||||
const [switchState, setSwitchState] = React.useState('setting');
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: '640px',
|
||||
display: 'flex',
|
||||
padding: '20px',
|
||||
flexDirection: 'column',
|
||||
gap: '20px'}}
|
||||
>
|
||||
<CustomTextField placeholder={"Можно добавить текст"} text={''}/>
|
||||
<Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
|
||||
<AddImage/>
|
||||
<Typography sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: '16px',
|
||||
lineHeight: '18.96px',
|
||||
color: theme.palette.grey2.main
|
||||
}}>Изображение</Typography>
|
||||
<Typography> или</Typography>
|
||||
<AddVideofile/>
|
||||
<Typography sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: '16px',
|
||||
lineHeight: '18.96px',
|
||||
color: theme.palette.grey2.main
|
||||
}}>Видео</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<ButtonsOptions switchState={switchState} SSHC={SSHC}/>
|
||||
<SwitchPageOptions switchState={switchState}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
type Props = {
|
||||
disableInput?: boolean;
|
||||
};
|
||||
|
||||
export default function PageOptions({ disableInput }: Props) {
|
||||
const theme = useTheme();
|
||||
const [switchState, setSwitchState] = React.useState("setting");
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: "640px",
|
||||
display: "flex",
|
||||
padding: "20px",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: disableInput ? "none" : "" }}>
|
||||
<CustomTextField placeholder={"Можно добавить текст"} text={""} />
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
|
||||
<AddImage />
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: "16px",
|
||||
lineHeight: "18.96px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Изображение
|
||||
</Typography>
|
||||
<Typography> или</Typography>
|
||||
<AddVideofile />
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: "16px",
|
||||
lineHeight: "18.96px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Видео
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<ButtonsOptions switchState={switchState} SSHC={SSHC} />
|
||||
<SwitchPageOptions switchState={switchState} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import Stepper from '@ui_kit/Stepper';
|
||||
import {Box, Button, IconButton, Typography, Paper, useTheme} from '@mui/material';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import Stepper from "@ui_kit/Stepper";
|
||||
import { Box, Button, IconButton, Typography, Paper, useTheme } from "@mui/material";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import OneIcon from "../../components/icons/questionsPage/OneIcon";
|
||||
import PointsIcon from "../../components/icons/questionsPage/PointsIcon";
|
||||
@ -21,62 +21,70 @@ import PageOptions from "./PageOptions/PageOptions";
|
||||
import RatingOptions from "./RatingOptions/RatingOptions";
|
||||
|
||||
export default function QuestionsPage() {
|
||||
const [activeStep, setActiveStep] = React.useState(1);
|
||||
|
||||
const handleNext = () => {
|
||||
setActiveStep((prevActiveStep) => prevActiveStep + 1);
|
||||
};
|
||||
|
||||
const [activeStep, setActiveStep] = React.useState(1);
|
||||
const handleBack = () => {
|
||||
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
setActiveStep((prevActiveStep) => prevActiveStep + 1);
|
||||
};
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<>
|
||||
<Stepper activeStep={activeStep} desc={"Задайте вопросы"} />
|
||||
<Typography>Заголовок квиза</Typography>
|
||||
<Paper sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0" }}>
|
||||
<Box
|
||||
sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
|
||||
>
|
||||
<CustomTextField placeholder="Заголовок вопроса" text={""} />
|
||||
<IconButton>
|
||||
{" "}
|
||||
<ExpandMoreIcon />{" "}
|
||||
</IconButton>
|
||||
<OneIcon />
|
||||
<PointsIcon />
|
||||
</Box>
|
||||
|
||||
const handleBack = () => {
|
||||
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
||||
};
|
||||
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<>
|
||||
<Stepper activeStep={activeStep} desc={"Задайте вопросы"}/>
|
||||
<Typography>Заголовок квиза</Typography>
|
||||
<Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0'}}>
|
||||
|
||||
<Box
|
||||
sx={{width: '100%', maxWidth: "760px", display: 'flex', alignItems: 'center', gap: '10px', padding: '20px' }}
|
||||
>
|
||||
<CustomTextField placeholder="Заголовок вопроса" text={""}/>
|
||||
<IconButton> <ExpandMoreIcon /> </IconButton>
|
||||
<OneIcon/>
|
||||
<PointsIcon/>
|
||||
</Box>
|
||||
|
||||
<Paper sx={{display: 'flex', flexDirection: 'column', padding: 0, borderRadius: '12px'}}>
|
||||
<TypeQuestions/>
|
||||
<AnswerOptions/>
|
||||
<OptionsPicture/>
|
||||
<OptionsAndPicture/>
|
||||
<Emoji/>
|
||||
<OwnTextField/>
|
||||
<DropDown/>
|
||||
<DataOptions/>
|
||||
<SliderOptions/>
|
||||
<UploadFile/>
|
||||
<PageOptions/>
|
||||
<RatingOptions/>
|
||||
</Paper>
|
||||
</Paper>
|
||||
<Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>
|
||||
<IconButton>
|
||||
<AddPlus/>
|
||||
</IconButton>
|
||||
<Box sx={{display: 'flex', gap: '8px'}}>
|
||||
<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>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
<Paper sx={{ display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px" }}>
|
||||
<TypeQuestions />
|
||||
<AnswerOptions />
|
||||
<OptionsPicture />
|
||||
<OptionsAndPicture />
|
||||
<Emoji />
|
||||
<OwnTextField />
|
||||
<DropDown />
|
||||
<DataOptions />
|
||||
<SliderOptions />
|
||||
<UploadFile />
|
||||
<PageOptions />
|
||||
<RatingOptions />
|
||||
</Paper>
|
||||
</Paper>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
|
||||
<IconButton>
|
||||
<AddPlus />
|
||||
</IconButton>
|
||||
<Box sx={{ display: "flex", gap: "8px" }}>
|
||||
<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>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,65 +1,66 @@
|
||||
import {Box, Typography, Link, useTheme} from "@mui/material";
|
||||
import { Box, Typography, Link, useTheme } from "@mui/material";
|
||||
import React from "react";
|
||||
import EnterIcon from "../../../components/icons/questionsPage/enterIcon";
|
||||
import SwitchAnswerOptions from "./switchAnswerOptions";
|
||||
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
|
||||
|
||||
|
||||
export default function AnswerOptions() {
|
||||
const theme = useTheme();
|
||||
const [switchState, setSwitchState] = React.useState('setting');
|
||||
// const [addInput, setAddInput] = React.useState([
|
||||
// 0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]};
|
||||
// ]);
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data)
|
||||
}
|
||||
const theme = useTheme();
|
||||
const [switchState, setSwitchState] = React.useState("setting");
|
||||
// const [addInput, setAddInput] = React.useState([
|
||||
// 0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]};
|
||||
// ]);
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data);
|
||||
};
|
||||
|
||||
// const createCondition = (name) => {
|
||||
// addInput([...state, {name: name}])
|
||||
// }
|
||||
//
|
||||
// const deleteCondition = (index) => {
|
||||
//
|
||||
// }
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ padding: '20px'}}>
|
||||
<Typography
|
||||
sx={{
|
||||
padding: '0 0 33px 80px',
|
||||
fontWeight: 400,
|
||||
fontSize: '18px',
|
||||
lineHeight: '21.33px',
|
||||
color: theme.palette.grey2.main
|
||||
}}
|
||||
>
|
||||
Добавьте ответ
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
sx={{color: theme.palette.brightPurple.main}}
|
||||
// onClick={() => {
|
||||
// console.info("I'm a button.");
|
||||
// }}
|
||||
>
|
||||
Добавьте ответ
|
||||
</Link>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: '18px',
|
||||
lineHeight: '21.33px',
|
||||
color: theme.palette.grey2.main
|
||||
}}
|
||||
>или нажмите Enter</Typography>
|
||||
<EnterIcon/>
|
||||
</Box>
|
||||
</Box>
|
||||
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC}/>
|
||||
<SwitchAnswerOptions switchState={switchState}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
// const createCondition = (name) => {
|
||||
// addInput([...state, {name: name}])
|
||||
// }
|
||||
//
|
||||
// const deleteCondition = (index) => {
|
||||
//
|
||||
// }
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
padding: "0 0 33px 80px",
|
||||
fontWeight: 400,
|
||||
fontSize: "18px",
|
||||
lineHeight: "21.33px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Добавьте ответ
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
sx={{ color: theme.palette.brightPurple.main }}
|
||||
// onClick={() => {
|
||||
// console.info("I'm a button.");
|
||||
// }}
|
||||
>
|
||||
Добавьте ответ
|
||||
</Link>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: "18px",
|
||||
lineHeight: "21.33px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
или нажмите Enter
|
||||
</Typography>
|
||||
<EnterIcon />
|
||||
</Box>
|
||||
</Box>
|
||||
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} />
|
||||
<SwitchAnswerOptions switchState={switchState} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,218 +1,294 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
FormControl, FormControlLabel, Link,
|
||||
MenuItem,
|
||||
Modal, Radio, RadioGroup,
|
||||
Select,
|
||||
SelectChangeEvent,
|
||||
Typography,
|
||||
useTheme
|
||||
Box,
|
||||
Button,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
Link,
|
||||
MenuItem,
|
||||
Modal,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Select,
|
||||
SelectChangeEvent,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import * as React from "react";
|
||||
import InfoIcon from "@icons/InfoIcon";
|
||||
import ArrowDown from "@icons/ArrowDownIcon";
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
|
||||
import { useState } from "react";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
|
||||
export default function BranchingQuestions() {
|
||||
const theme = useTheme()
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
const theme = useTheme();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [condition, setCondition] = useState<boolean>(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [display, setDisplay] = React.useState('1');
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setDisplay(event.target.value);
|
||||
}
|
||||
const [display, setDisplay] = React.useState("1");
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setDisplay(event.target.value);
|
||||
};
|
||||
|
||||
const [value, setValue] = React.useState('1');
|
||||
const [value, setValue] = React.useState("1");
|
||||
|
||||
const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue((event.target as HTMLInputElement).value);
|
||||
};
|
||||
return(
|
||||
<>
|
||||
<Button onClick={handleOpen}>открыть</Button>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue((event.target as HTMLInputElement).value);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Button 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: "620px",
|
||||
width: "100%",
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: "12px",
|
||||
|
||||
boxShadow: 24,
|
||||
p: 0,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "30px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "20px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box sx={{position: 'absolute' as 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
maxWidth: '620px',
|
||||
width: '100%',
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: '12px',
|
||||
|
||||
boxShadow: 24,
|
||||
p: 0,}}>
|
||||
<Box
|
||||
sx={{display: 'flex',
|
||||
padding: '20px',
|
||||
borderRadius: '12px 12px 0 0',
|
||||
background: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<Typography>0</Typography>
|
||||
<InfoIcon/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
padding: '20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '30px'
|
||||
}}>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
gap: '20px',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<FormControl
|
||||
fullWidth
|
||||
size="small"
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: "140px",
|
||||
height: "48px",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
id="display-select"
|
||||
variant="outlined"
|
||||
value={display}
|
||||
displayEmpty
|
||||
onChange={handleChange}
|
||||
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",
|
||||
}
|
||||
}}
|
||||
IconComponent={props => <ArrowDown {...props} />}
|
||||
>
|
||||
<MenuItem
|
||||
value={1}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Показать
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
value={2}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Скрыть
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>если в ответе на вопрос</Typography>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'baseline',
|
||||
}}>
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
sx={{color: theme.palette.brightPurple.main}}
|
||||
// onClick={() => {
|
||||
// }}
|
||||
>
|
||||
Добавить условие
|
||||
</Link>
|
||||
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||||
name="controlled-radio-buttons-group"
|
||||
value={value}
|
||||
onChange={handleChangeRadio}
|
||||
>
|
||||
<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>
|
||||
|
||||
</Box>
|
||||
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
|
||||
<CustomButton
|
||||
variant="outlined"
|
||||
onClick={handleClose}
|
||||
sx={{
|
||||
border: `1px solid ${theme.palette.brightPurple.main}`,
|
||||
color: theme.palette.brightPurple.main,
|
||||
width: "auto",
|
||||
ml: "auto",
|
||||
px: "20px",
|
||||
py: "9px",
|
||||
}}
|
||||
>Отмена</CustomButton>
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
color: "white",
|
||||
width: "auto",
|
||||
px: "20px",
|
||||
py: "9px",
|
||||
}}
|
||||
>Готово</CustomButton>
|
||||
</Box>
|
||||
</Box>
|
||||
<FormControl
|
||||
fullWidth
|
||||
size="small"
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: "140px",
|
||||
height: "48px",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
id="display-select"
|
||||
variant="outlined"
|
||||
value={display}
|
||||
displayEmpty
|
||||
onChange={handleChange}
|
||||
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",
|
||||
},
|
||||
}}
|
||||
IconComponent={(props) => <ArrowDown {...props} />}
|
||||
>
|
||||
<MenuItem
|
||||
value={1}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Показать
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
value={2}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Скрыть
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>если в ответе на вопрос</Typography>
|
||||
</Box>
|
||||
{condition ? (
|
||||
<Box sx={{ padding: "20px", borderRadius: "8px", height: "100%", bgcolor: "#F2F3F7" }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", pb: "14px" }}>
|
||||
<Typography>Условие 1</Typography>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
<TextField
|
||||
// value={text}
|
||||
fullWidth
|
||||
sx={{
|
||||
pb: "20px",
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ display: "flex", alignItems: "center", pb: "14px" }}>
|
||||
<Typography>Дан ответ</Typography>
|
||||
<Typography sx={{ color: "#7E2AEA", pl: "10px" }}>(Укажите один или несколько вариантов)</Typography>
|
||||
</Box>
|
||||
<TextField
|
||||
// value={text}
|
||||
fullWidth
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "baseline",
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
sx={{ color: theme.palette.brightPurple.main }}
|
||||
onClick={() => setCondition(true)}
|
||||
>
|
||||
Добавить условие
|
||||
</Link>
|
||||
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||||
name="controlled-radio-buttons-group"
|
||||
value={value}
|
||||
onChange={handleChangeRadio}
|
||||
>
|
||||
<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>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
|
||||
<CustomButton
|
||||
variant="outlined"
|
||||
onClick={handleClose}
|
||||
sx={{
|
||||
border: `1px solid ${theme.palette.brightPurple.main}`,
|
||||
color: theme.palette.brightPurple.main,
|
||||
width: "auto",
|
||||
ml: "auto",
|
||||
px: "20px",
|
||||
py: "9px",
|
||||
}}
|
||||
>
|
||||
Отмена
|
||||
</CustomButton>
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
color: "white",
|
||||
width: "auto",
|
||||
px: "20px",
|
||||
py: "9px",
|
||||
}}
|
||||
>
|
||||
Готово
|
||||
</CustomButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
43
src/pages/Result.tsx
Normal file
43
src/pages/Result.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import CreationFullCard from "../components/CreationFullCard";
|
||||
import image from "../assets/Rectangle 110.png";
|
||||
import { Box, useTheme } from "@mui/material";
|
||||
import CustomButton from "../components/CustomButton";
|
||||
import { useState } from "react";
|
||||
import ResultSetting from "../components/ResultSetting";
|
||||
|
||||
import Info from "@icons/Info";
|
||||
|
||||
export default function Result() {
|
||||
const theme = useTheme();
|
||||
|
||||
const [settings, setSettings] = useState<boolean>(false);
|
||||
return (
|
||||
<Box>
|
||||
{settings ? (
|
||||
<ResultSetting setSettings={setSettings} />
|
||||
) : (
|
||||
<>
|
||||
<CreationFullCard
|
||||
text="Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке."
|
||||
text2="Этот шаг - необязательный, квиз будет работать и без автоматических результатов."
|
||||
image={image}
|
||||
/>
|
||||
<Box sx={{ mt: "30px", alignItems: "center" }}>
|
||||
<CustomButton
|
||||
onClick={() => setSettings(true)}
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
mr: "23px",
|
||||
minWidth: "258px",
|
||||
}}
|
||||
>
|
||||
Создать результаты
|
||||
</CustomButton>
|
||||
<Info />
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@ -3,32 +3,35 @@ import ComplexNavText from "../../components/ComplexNavText";
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
import SectionWrapper from "../../components/SectionWrapper";
|
||||
|
||||
|
||||
export default function FirstQuiz() {
|
||||
const theme = useTheme();
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<SectionWrapper
|
||||
maxWidth="lg"
|
||||
sx={{
|
||||
mt: "25px",
|
||||
mb: "70px",
|
||||
}}
|
||||
>
|
||||
<ComplexNavText text1="Кабинет квизов" />
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
mt: "20px",
|
||||
mb: "30px",
|
||||
}}
|
||||
>Создайте свой первый квиз</Typography>
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main
|
||||
}}
|
||||
>Создать +</CustomButton>
|
||||
</SectionWrapper>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<SectionWrapper
|
||||
maxWidth="lg"
|
||||
sx={{
|
||||
mt: "25px",
|
||||
mb: "70px",
|
||||
}}
|
||||
>
|
||||
<ComplexNavText text1="Кабинет квизов" />
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
mt: "20px",
|
||||
mb: "30px",
|
||||
}}
|
||||
>
|
||||
Создайте свой первый квиз
|
||||
</Typography>
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
}}
|
||||
>
|
||||
Создать +
|
||||
</CustomButton>
|
||||
</SectionWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,40 +1,38 @@
|
||||
import {Box, Button, Typography, useTheme} from "@mui/material";
|
||||
import { Box, Button, Typography, useTheme } from "@mui/material";
|
||||
import CreationCard from "@ui_kit/CreationCard";
|
||||
import quizCreationImage1 from "../../assets/quiz-creation-1.png";
|
||||
import quizCreationImage2 from "../../assets/quiz-creation-2.png";
|
||||
|
||||
interface HandleNext {
|
||||
handleNext: () => void
|
||||
handleNext: () => void;
|
||||
}
|
||||
|
||||
export default function StepOne({handleNext}:HandleNext) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
gap: "3.4%",
|
||||
mt: "60px",
|
||||
}}>
|
||||
<Button variant='text'
|
||||
onClick={() => handleNext()}
|
||||
>
|
||||
<CreationCard
|
||||
header="Создание квиз-опроса"
|
||||
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
|
||||
image={quizCreationImage1}
|
||||
/>
|
||||
export default function StepOne({ handleNext }: HandleNext) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "3.4%",
|
||||
mt: "60px",
|
||||
}}
|
||||
>
|
||||
<Button variant="text" onClick={() => handleNext()}>
|
||||
<CreationCard
|
||||
header="Создание квиз-опроса"
|
||||
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
|
||||
image={quizCreationImage1}
|
||||
/>
|
||||
</Button>
|
||||
<Button variant='text'
|
||||
onClick={() => handleNext()}
|
||||
>
|
||||
<CreationCard
|
||||
header="Создание анкеты"
|
||||
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
|
||||
image={quizCreationImage2}
|
||||
/>
|
||||
<Button variant="text" onClick={() => handleNext()}>
|
||||
<CreationCard
|
||||
header="Создание анкеты"
|
||||
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
|
||||
image={quizCreationImage2}
|
||||
/>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,39 +1,35 @@
|
||||
import {FormControl, TextField, useTheme} from "@mui/material";
|
||||
import { FormControl, TextField, useTheme } from "@mui/material";
|
||||
|
||||
interface CustomTextFieldProps {
|
||||
placeholder: string;
|
||||
text: string;
|
||||
placeholder: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export default function CustomTextField({ placeholder, text }: CustomTextFieldProps) {
|
||||
const theme = useTheme();
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<FormControl
|
||||
fullWidth
|
||||
variant="standard"
|
||||
sx={{ p: 0 }}
|
||||
>
|
||||
<TextField
|
||||
// value={text}
|
||||
fullWidth
|
||||
placeholder={placeholder}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
"& .MuiInputBase-root": {
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
}
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<FormControl fullWidth variant="standard" sx={{ p: 0 }}>
|
||||
<TextField
|
||||
// value={text}
|
||||
fullWidth
|
||||
placeholder={placeholder}
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user