SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

добавила две кнопки и их настройки

Browse Source
This commit is contained in:
tamara 2023-03-30 21:39:59 +03:00
parent 0e62c7cdfd
commit 8a1e2762b6
27 changed files with 850 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/icons/questionsPage/FormatIcon1.tsx Normal file
View File

@ -0,0 +1,35 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function FormatIcon1({color}: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.3333 0H1.66667C0.746192 0 0 0.89543 0 2V38C0 39.1046 0.746192 40 1.66667 40H38.3333C39.2538 40 40 39.1046 40 38V2C40 0.89543 39.2538 0 38.3333 0Z" fill="none"/>
<path d="M34.418 35L34.418 5" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M33 34L34.3953 36L35.7907 34" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.4069 5.47656H6.47676C6.22748 5.47656 6.02539 5.85757 6.02539 6.32757V21.6457C6.02539 22.1157 6.22748 22.4967 6.47676 22.4967H16.4069C16.6562 22.4967 16.8583 22.1157 16.8583 21.6457V6.32757C16.8583 5.85757 16.6562 5.47656 16.4069 5.47656Z" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="9.2" cy="8.2" r="1.2" fill={color}/>
<path d="M17 36V26.8678C17 26.3885 16.7948 26 16.5417 26H6.45833C6.2052 26 6 26.3885 6 26.8678V36" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M30.5729 5.47656H20.6428C20.3935 5.47656 20.1914 5.85757 20.1914 6.32757V21.6457C20.1914 22.1157 20.3935 22.4967 20.6428 22.4967H30.5729C30.8222 22.4967 31.0243 22.1157 31.0243 21.6457V6.32757C31.0243 5.85757 30.8222 5.47656 30.5729 5.47656Z" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="23.2" cy="8.2" r="1.2" fill={color}/>
<path d="M31.0243 35.8867V26.9311C31.0243 26.4611 30.8222 26.0801 30.5729 26.0801H20.6428C20.3935 26.0801 20.1914 26.4611 20.1914 26.9311L20.1914 35.8867" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="23.2" cy="29.2" r="1.2" fill={color}/>
<ellipse cx="9.2" cy="29.2" rx="1.2" ry="1.20003" fill={color}/>
</svg>
</Box>
);
}

32
src/components/icons/questionsPage/FormatIcon2.tsx Normal file
View File

@ -0,0 +1,32 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function FormatIcon2({ color }: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.3333 0H1.66667C0.746192 0 0 0.89543 0 2V38C0 39.1046 0.746192 40 1.66667 40H38.3333C39.2538 40 40 39.1046 40 38V2C40 0.89543 39.2538 0 38.3333 0Z" fill="none"/>
<path d="M33.9994 16.1953L35.8848 19.0233L33.9994 21.8514" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.59824 16.1953L4.71289 19.0233L6.59824 21.8514" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="13.2" cy="11.2" r="1.2" fill={color}/>
<circle cx="25.2" cy="11.2" r="1.2" fill={color}/>
<rect x="10" y="8" width="9" height="23" rx="1" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="22" y="8" width="9" height="23" rx="1" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

27
src/components/icons/questionsPage/ProportionsIcon11.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function ProportionsIcon11({color}: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.3333 0H1.66667C0.746192 0 0 0.89543 0 2V38C0 39.1046 0.746192 40 1.66667 40H38.3333C39.2538 40 40 39.1046 40 38V2C40 0.89543 39.2538 0 38.3333 0Z" fill="none"/>
<circle cx="9.6" cy="8.6" r="1.6" fill={color}/>
<rect x="5" y="5" width="30" height="30" rx="1" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

27
src/components/icons/questionsPage/ProportionsIcon12.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function ProportionsIcon12({color}: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.3333 0H1.66667C0.746192 0 0 0.89543 0 2V38C0 39.1046 0.746192 40 1.66667 40H38.3333C39.2538 40 40 39.1046 40 38V2C40 0.89543 39.2538 0 38.3333 0Z" fill="none"/>
<circle cx="8.6" cy="13.6" r="1.6" fill={color}/>
<rect x="5" y="29" width="19" height="30" rx="1" transform="rotate(-90 5 29)" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

27
src/components/icons/questionsPage/ProportionsIcon21.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function ProportionsIcon21({color}: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.3333 0H1.66667C0.746192 0 0 0.89543 0 2V38C0 39.1046 0.746192 40 1.66667 40H38.3333C39.2538 40 40 39.1046 40 38V2C40 0.89543 39.2538 0 38.3333 0Z" fill="none"/>
<circle cx="14.6" cy="8.6" r="1.6" fill={color}/>
<rect x="11" y="5" width="19" height="30" rx="1" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

30
src/components/icons/questionsPage/addImage.tsx Normal file
View File

@ -0,0 +1,30 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function AddImage() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="60" height="40" viewBox="0 0 60 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M40.3333 0H1.66667C0.746192 0 0 0.89543 0 2V38C0 39.1046 0.746192 40 1.66667 40H40.3333V0Z" fill="#EEE4FC"/>
<path d="M58 0H40V40H58C58.4602 40 60 39.1046 60 38V2C60 0.89543 58.4602 0 58 0Z" fill="#7E2AEA"/>
<path d="M49.518 24.612C49.398 24.612 49.296 24.576 49.212 24.504C49.14 24.42 49.104 24.318 49.104 24.198V20.454H45.414C45.294 20.454 45.192 20.418 45.108 20.346C45.036 20.262 45 20.16 45 20.04V19.464C45 19.344 45.036 19.248 45.108 19.176C45.192 19.092 45.294 19.05 45.414 19.05H49.104V15.414C49.104 15.294 49.14 15.198 49.212 15.126C49.296 15.042 49.398 15 49.518 15H50.148C50.268 15 50.364 15.042 50.436 15.126C50.52 15.198 50.562 15.294 50.562 15.414V19.05H54.27C54.39 19.05 54.486 19.092 54.558 19.176C54.642 19.248 54.684 19.344 54.684 19.464V20.04C54.684 20.16 54.642 20.262 54.558 20.346C54.486 20.418 54.39 20.454 54.27 20.454H50.562V24.198C50.562 24.318 50.52 24.42 50.436 24.504C50.364 24.576 50.268 24.612 50.148 24.612H49.518Z" fill="white"/>
<path d="M30.9583 10H8.04167C7.46637 10 7 10.4477 7 11V29C7 29.5523 7.46637 30 8.04167 30H30.9583C31.5336 30 32 29.5523 32 29V11C32 10.4477 31.5336 10 30.9583 10Z" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 24.9035L13.5495 18.3127C13.6464 18.2137 13.7619 18.135 13.8894 18.0813C14.0168 18.0276 14.1535 18 14.2917 18C14.4298 18 14.5666 18.0276 14.694 18.0813C14.8214 18.135 14.9369 18.2137 15.0339 18.3127L20.8411 24.1567C20.9381 24.2557 21.0536 24.3343 21.181 24.388C21.3084 24.4417 21.4452 24.4694 21.5833 24.4694C21.7215 24.4694 21.8582 24.4417 21.9856 24.388C22.1131 24.3343 22.2286 24.2557 22.3255 24.1567L25.0078 21.4574C25.1047 21.3584 25.2203 21.2797 25.3477 21.2261C25.4751 21.1724 25.6119 21.1447 25.75 21.1447C25.8881 21.1447 26.0249 21.1724 26.1523 21.2261C26.2797 21.2797 26.3953 21.3584 26.4922 21.4574L32 27" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.5 18C23.3284 18 24 17.3284 24 16.5C24 15.6716 23.3284 15 22.5 15C21.6716 15 21 15.6716 21 16.5C21 17.3284 21.6716 18 22.5 18Z" fill="#7E2AEA"/>
</svg>
</Box>
);
}

15
src/components/icons/questionsPage/branching.tsx
View File

@ -1,7 +1,10 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function Branching() {
export default function Branching({color}: Props) {
return (
<Box
@ -14,11 +17,11 @@ export default function Branching() {
}}
>
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.4939 11.5C7.46039 11.5 8.2439 10.7165 8.2439 9.75C8.2439 8.7835 7.46039 8 6.4939 8C5.5274 8 4.7439 8.7835 4.7439 9.75C4.7439 10.7165 5.5274 11.5 6.4939 11.5Z" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.2439 4C11.2104 4 11.9939 3.2165 11.9939 2.25C11.9939 1.2835 11.2104 0.5 10.2439 0.5C9.2774 0.5 8.4939 1.2835 8.4939 2.25C8.4939 3.2165 9.2774 4 10.2439 4Z" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.7439 4C3.71039 4 4.4939 3.2165 4.4939 2.25C4.4939 1.2835 3.71039 0.5 2.7439 0.5C1.7774 0.5 0.993896 1.2835 0.993896 2.25C0.993896 3.2165 1.7774 4 2.7439 4Z" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.74391 4V4.5C2.74308 4.69721 2.78132 4.89264 2.85641 5.075C2.9315 5.25736 3.04195 5.42305 3.18141 5.5625C3.32086 5.70196 3.48655 5.81241 3.66891 5.8875C3.85127 5.96259 4.0467 6.00083 4.24391 6H8.74391C8.94112 6.00083 9.13655 5.96259 9.31891 5.8875C9.50127 5.81241 9.66696 5.70196 9.80641 5.5625C9.94587 5.42305 10.0563 5.25736 10.1314 5.075C10.2065 4.89264 10.2447 4.69721 10.2439 4.5V4" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.4939 6V8" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.4939 11.5C7.46039 11.5 8.2439 10.7165 8.2439 9.75C8.2439 8.7835 7.46039 8 6.4939 8C5.5274 8 4.7439 8.7835 4.7439 9.75C4.7439 10.7165 5.5274 11.5 6.4939 11.5Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.2439 4C11.2104 4 11.9939 3.2165 11.9939 2.25C11.9939 1.2835 11.2104 0.5 10.2439 0.5C9.2774 0.5 8.4939 1.2835 8.4939 2.25C8.4939 3.2165 9.2774 4 10.2439 4Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.7439 4C3.71039 4 4.4939 3.2165 4.4939 2.25C4.4939 1.2835 3.71039 0.5 2.7439 0.5C1.7774 0.5 0.993896 1.2835 0.993896 2.25C0.993896 3.2165 1.7774 4 2.7439 4Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.74391 4V4.5C2.74308 4.69721 2.78132 4.89264 2.85641 5.075C2.9315 5.25736 3.04195 5.42305 3.18141 5.5625C3.32086 5.70196 3.48655 5.81241 3.66891 5.8875C3.85127 5.96259 4.0467 6.00083 4.24391 6H8.74391C8.94112 6.00083 9.13655 5.96259 9.31891 5.8875C9.50127 5.81241 9.66696 5.70196 9.80641 5.5625C9.94587 5.42305 10.0563 5.25736 10.1314 5.075C10.2065 4.89264 10.2447 4.69721 10.2439 4.5V4" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.4939 6V8" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);

12
src/components/icons/questionsPage/clue.tsx
View File

@ -1,7 +1,11 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function Clue() {
export default function Clue({color}: Props) {
return (
<Box
@ -14,9 +18,9 @@ export default function Clue() {
}}
>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.84402 10.0557C1.09957 8.79972 0.839172 7.31518 1.11171 5.88081C1.38424 4.44643 2.17097 3.16085 3.32419 2.26542C4.47741 1.36998 5.91782 0.926281 7.375 1.0176C8.83219 1.10892 10.2059 1.72899 11.2383 2.7614C12.2707 3.7938 12.8908 5.16754 12.9821 6.62472C13.0734 8.08191 12.6297 9.52231 11.7343 10.6755C10.8389 11.8288 9.5533 12.6155 8.11892 12.888C6.68454 13.1606 5.20001 12.9002 3.94402 12.1557V12.1557L1.86902 12.7432C1.784 12.7681 1.69387 12.7696 1.60805 12.7477C1.52224 12.7257 1.44391 12.6811 1.38128 12.6184C1.31865 12.5558 1.27402 12.4775 1.25207 12.3917C1.23011 12.3059 1.23165 12.2157 1.25652 12.1307L1.84402 10.0557Z" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.00635 5.99316H9.00635" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.00635 7.99316H9.00635" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.84402 10.0557C1.09957 8.79972 0.839172 7.31518 1.11171 5.88081C1.38424 4.44643 2.17097 3.16085 3.32419 2.26542C4.47741 1.36998 5.91782 0.926281 7.375 1.0176C8.83219 1.10892 10.2059 1.72899 11.2383 2.7614C12.2707 3.7938 12.8908 5.16754 12.9821 6.62472C13.0734 8.08191 12.6297 9.52231 11.7343 10.6755C10.8389 11.8288 9.5533 12.6155 8.11892 12.888C6.68454 13.1606 5.20001 12.9002 3.94402 12.1557V12.1557L1.86902 12.7432C1.784 12.7681 1.69387 12.7696 1.60805 12.7477C1.52224 12.7257 1.44391 12.6811 1.38128 12.6184C1.31865 12.5558 1.27402 12.4775 1.25207 12.3917C1.23011 12.3059 1.23165 12.2157 1.25652 12.1307L1.84402 10.0557Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.00635 5.99316H9.00635" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.00635 7.99316H9.00635" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);

11
src/components/icons/questionsPage/imgIcon.tsx
View File

@ -1,7 +1,10 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function ImgIcon() {
export default function ImgIcon({color}: Props) {
return (
<Box
@ -14,9 +17,9 @@ export default function ImgIcon() {
}}
>
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4939 0.5H1.4939C1.21775 0.5 0.993896 0.723858 0.993896 1V11C0.993896 11.2761 1.21775 11.5 1.4939 11.5H11.4939C11.77 11.5 11.9939 11.2761 11.9939 11V1C11.9939 0.723858 11.77 0.5 11.4939 0.5Z" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.9939 7.99995L9.35015 5.35619C9.30362 5.30895 9.24817 5.27144 9.18701 5.24583C9.12584 5.22022 9.0602 5.20703 8.9939 5.20703C8.92759 5.20703 8.86195 5.22022 8.80079 5.24583C8.73963 5.27144 8.68417 5.30895 8.63765 5.35619L5.85015 8.1437C5.80362 8.19094 5.74817 8.22845 5.68701 8.25406C5.62584 8.27967 5.5602 8.29286 5.4939 8.29286C5.42759 8.29286 5.36195 8.27967 5.30079 8.25406C5.23963 8.22845 5.18417 8.19094 5.13765 8.1437L3.85015 6.85619C3.80362 6.80895 3.74817 6.77144 3.68701 6.74583C3.62584 6.72022 3.5602 6.70703 3.4939 6.70703C3.42759 6.70703 3.36195 6.72022 3.30079 6.74583C3.23963 6.77144 3.18417 6.80895 3.13765 6.85619L0.993896 8.99995" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.7439 4.5C5.15811 4.5 5.4939 4.16421 5.4939 3.75C5.4939 3.33579 5.15811 3 4.7439 3C4.32968 3 3.9939 3.33579 3.9939 3.75C3.9939 4.16421 4.32968 4.5 4.7439 4.5Z" fill="#4D4D4D"/>
<path d="M11.4939 0.5H1.4939C1.21775 0.5 0.993896 0.723858 0.993896 1V11C0.993896 11.2761 1.21775 11.5 1.4939 11.5H11.4939C11.77 11.5 11.9939 11.2761 11.9939 11V1C11.9939 0.723858 11.77 0.5 11.4939 0.5Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.9939 7.99995L9.35015 5.35619C9.30362 5.30895 9.24817 5.27144 9.18701 5.24583C9.12584 5.22022 9.0602 5.20703 8.9939 5.20703C8.92759 5.20703 8.86195 5.22022 8.80079 5.24583C8.73963 5.27144 8.68417 5.30895 8.63765 5.35619L5.85015 8.1437C5.80362 8.19094 5.74817 8.22845 5.68701 8.25406C5.62584 8.27967 5.5602 8.29286 5.4939 8.29286C5.42759 8.29286 5.36195 8.27967 5.30079 8.25406C5.23963 8.22845 5.18417 8.19094 5.13765 8.1437L3.85015 6.85619C3.80362 6.80895 3.74817 6.77144 3.68701 6.74583C3.62584 6.72022 3.5602 6.70703 3.4939 6.70703C3.42759 6.70703 3.36195 6.72022 3.30079 6.74583C3.23963 6.77144 3.18417 6.80895 3.13765 6.85619L0.993896 8.99995" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.7439 4.5C5.15811 4.5 5.4939 4.16421 5.4939 3.75C5.4939 3.33579 5.15811 3 4.7439 3C4.32968 3 3.9939 3.33579 3.9939 3.75C3.9939 4.16421 4.32968 4.5 4.7439 4.5Z" fill={color}/>
</svg>
</Box>
);

7
src/components/icons/questionsPage/settingIcon.tsx
View File

@ -1,7 +1,10 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function SettingIcon() {
export default function SettingIcon({color}: Props) {
return (
<Box
@ -14,7 +17,7 @@ export default function SettingIcon() {
}}
>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6839 3.43834C13.0118 4.20415 13.0921 5.05335 12.9135 5.86705C12.7348 6.68076 12.3062 7.41823 11.6876 7.97622C11.069 8.53421 10.2914 8.88478 9.4636 8.97885C8.63585 9.07292 7.7994 8.90579 7.07135 8.50084V8.50084L3.5651 12.5633C3.28331 12.8451 2.90112 13.0034 2.5026 13.0034C2.10409 13.0034 1.72189 12.8451 1.4401 12.5633C1.15831 12.2816 1 11.8994 1 11.5008C1 11.1023 1.15831 10.7201 1.4401 10.4383L5.5026 6.93209C5.09766 6.20405 4.93052 5.3676 5.0246 4.53984C5.11867 3.71209 5.46924 2.93447 6.02723 2.31586C6.58522 1.69725 7.32269 1.26862 8.13639 1.08998C8.95009 0.911332 9.79929 0.991618 10.5651 1.31959L7.9401 3.93834L8.29635 5.70709L10.0651 6.06334L12.6839 3.43834Z" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.6839 3.43834C13.0118 4.20415 13.0921 5.05335 12.9135 5.86705C12.7348 6.68076 12.3062 7.41823 11.6876 7.97622C11.069 8.53421 10.2914 8.88478 9.4636 8.97885C8.63585 9.07292 7.7994 8.90579 7.07135 8.50084V8.50084L3.5651 12.5633C3.28331 12.8451 2.90112 13.0034 2.5026 13.0034C2.10409 13.0034 1.72189 12.8451 1.4401 12.5633C1.15831 12.2816 1 11.8994 1 11.5008C1 11.1023 1.15831 10.7201 1.4401 10.4383L5.5026 6.93209C5.09766 6.20405 4.93052 5.3676 5.0246 4.53984C5.11867 3.71209 5.46924 2.93447 6.02723 2.31586C6.58522 1.69725 7.32269 1.26862 8.13639 1.08998C8.95009 0.911332 9.79929 0.991618 10.5651 1.31959L7.9401 3.93834L8.29635 5.70709L10.0651 6.06334L12.6839 3.43834Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);

25
src/pages/Questions/ButtonsOptions.tsx
View File

@ -1,13 +1,12 @@
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react";
import SettingIcon from "../../components/icons/questionsPage/settingIcon";
import Clue from "../../components/icons/questionsPage/clue";
import Branching from "../../components/icons/questionsPage/branching";
import ImgIcon from "../../components/icons/questionsPage/imgIcon";
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 "../../components/icons/questionsPage/hideIcon";
import CopyIcon from "../../components/icons/questionsPage/CopyIcon";
import DeleteIcon from "../../components/icons/questionsPage/deleteIcon";
import HideIcon from "@icons/questionsPage/hideIcon";
import CopyIcon from "@icons/questionsPage/CopyIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
interface Props {
switchState: string
@ -15,13 +14,13 @@ interface Props {
}
export default function ButtonsOptions ({SSHC, switchState}:Props) {
const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
{icon: <SettingIcon/>, title: 'Настройки', value: 'setting'},
{icon: <Clue/>, title: 'Подсказка', value: 'help'},
{icon: <Branching/>, title: 'Ветвление', value: 'branching'},
{icon: <ImgIcon/>, title: 'Изображение', value: 'image'},
]
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',

88
src/pages/Questions/ButtonsOptionsAndPict.tsx Normal file
View File

@ -0,0 +1,88 @@
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 ImgIcon from "@icons/questionsPage/imgIcon";
interface Props {
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>
)
}

55
src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx Normal file
View File

@ -0,0 +1,55 @@
import {Box, Link, Typography, useTheme} from "@mui/material";
import AddImage from "@icons/questionsPage/addImage";
import EnterIcon from "@icons/questionsPage/enterIcon";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import SwitchOptionsAndPict from "./switchOptionsAndPict";
import React from "react";
export default function OptionsAndPicture() {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
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'}}>
<AddImage/>
<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}/>
<SwitchOptionsAndPict switchState={switchState}/>
</>
)
}

25
src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx Normal file
View File

@ -0,0 +1,25 @@
import {Box, Typography} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "@icons/InfoIcon";
export default function SettingOptionsAndPict() {
return(
<>
<Box sx={{display: 'flex', width: '100%', justifyContent: 'space-between'}}>
<Box sx={{padding: '20px', width: '100%'}}>
<Typography sx={{marginBottom: '15px'}}>Настройки ответов</Typography>
<CustomCheckbox label={'Вариант "свой ответ"'}/>
<Typography sx={{marginBottom: '15px'}}>Текст-заглушка на картинке</Typography>
<CustomTextField placeholder={'Пример текста'} text={''}/>
</Box>
<Box sx={{padding: '20px'}}>
<Typography sx={{marginBottom: '15px'}}>Настройки вопросов</Typography>
<CustomCheckbox label={'Необязательный вопрос'}/>
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
</Box>
</Box>
</>
)
}

30
src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx Normal file
View File

@ -0,0 +1,30 @@
import * as React from 'react';
import BranchingQuestions from "../branchingQuestions";
import SettingOptionsAndPict from "./SettingOptionsAndPict";
import HelpQuestions from "../helpQuestions";
import UploadImage from "../UploadImage";
interface Props {
switchState: string,
}
export default function SwitchOptionsAndPict({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingOptionsAndPict/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
case 'image':
return (<UploadImage/>);
break;
default:
return (<></>)
}
}

66
src/pages/Questions/OptionsPicture/OptionsPicture.tsx Normal file
View File

@ -0,0 +1,66 @@
import {Box, Link, Typography, useTheme} from "@mui/material";
import React from "react";
import EnterIcon from "@icons/questionsPage/enterIcon";
import AddImage from "@icons/questionsPage/addImage";
import ButtonsOptions from "../ButtonsOptions";
import SwitchAnswerOptionsPict from "./switchOptionsPict";
export default function OptionsPicture() {
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'}}>
<AddImage/>
<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>
<ButtonsOptions switchState={switchState} SSHC={SSHC}/>
<SwitchAnswerOptionsPict switchState={switchState}/>
</>
)
}

91
src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx Normal file
View File

@ -0,0 +1,91 @@
import {Box, Typography, useTheme} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "@icons/InfoIcon";
import {useState} from "react";
import FormatIcon2 from "@icons/questionsPage/FormatIcon2";
import FormatIcon1 from "@icons/questionsPage/FormatIcon1";
import CustomButton from "../../../components/CustomButton";
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;
}
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");
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>
</>
);
};

26
src/pages/Questions/OptionsPicture/switchOptionsPict.tsx Normal file
View File

@ -0,0 +1,26 @@
import * as React from 'react';
import BranchingQuestions from "../branchingQuestions";
import SettingOpytionsPict from "./settingOpytionsPict";
import HelpQuestions from "../helpQuestions";
interface Props {
switchState: string,
}
export default function SwitchAnswerOptionsPict({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingOpytionsPict/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
default:
return (<></>)
}
}

24
src/pages/Questions/QuestionsPage.tsx
View File

@ -12,6 +12,8 @@ import AddPlus from "../../components/icons/questionsPage/addPlus";
import ArrowLeft from "../../components/icons/questionsPage/arrowLeft";
import TypeQuestions from "./TypeQuestions";
import AnswerOptions from "./answerOptions/AnswerOptions";
import OptionsPicture from "./OptionsPicture/OptionsPicture";
import OptionsAndPicture from "./OptionsAndPicture/OptionsAndPicture";
export default function QuestionsPage() {
@ -32,21 +34,21 @@ export default function QuestionsPage() {
<Stepper activeStep={activeStep} desc={"Задайте вопросы"}/>
<Typography>Заголовок квиза</Typography>
<Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0'}}>
<Box sx={{display: 'flex', width: '100%'}}>
<Box
sx={{width: '100%'}}
>
<CustomTextField placeholder="Заголовок вопроса" text={""}/>
<IconButton> <ExpandMoreIcon /> </IconButton>
</Box>
<Box sx={{display: 'flex', alignItems: 'center', gap: '10px', paddingRight: '20px'}}>
<OneIcon/>
<PointsIcon/>
</Box>
<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/>
</Paper>
</Paper>
<Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>

4
src/pages/Questions/answerOptions/UploadImage.tsx → src/pages/Questions/UploadImage.tsx
View File

@ -1,6 +1,6 @@
import {Typography, Box, useTheme, ButtonBase, Modal} from "@mui/material";
import UploadBox from "../../../components/CreateQuiz/UploadBox";
import UploadIcon from "../../../components/icons/UploadIcon";
import UploadBox from "../../components/CreateQuiz/UploadBox";
import UploadIcon from "@icons/UploadIcon";
import * as React from "react";
const Modalka = ({open, handleClose, imgHC}:any) => {

4
src/pages/Questions/answerOptions/AnswerOptions.tsx
View File

@ -1,8 +1,8 @@
import {Box, Typography, Link, useTheme} from "@mui/material";
import React from "react";
import EnterIcon from "../../../components/icons/questionsPage/enterIcon";
import ButtonsOptions from "../ButtonsOptions";
import SwitchAnswerOptions from "./switchAnswerOptions";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
export default function AnswerOptions() {
@ -58,7 +58,7 @@ export default function AnswerOptions() {
<EnterIcon/>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC}/>
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC}/>
<SwitchAnswerOptions switchState={switchState}/>
</>
)

201
src/pages/Questions/answerOptions/branchingAnswerOptions.tsx
View File

@ -1,201 +0,0 @@
import {
Box,
Button,
FormControl, FormControlLabel, Link,
MenuItem,
Modal, Radio, RadioGroup,
Select,
SelectChangeEvent,
Typography,
useTheme
} from "@mui/material";
import * as React from "react";
import InfoIcon from "../../../components/icons/InfoIcon";
import ArrowDown from "../../../components/icons/ArrowDownIcon";
import CustomButton from "../../../components/CustomButton";
export default function BranchingAnswerOptions() {
const theme = useTheme()
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const [display, setDisplay] = React.useState('10');
const handleChange = (event: SelectChangeEvent) => {
setDisplay(event.target.value);
}
const [value, setValue] = React.useState('female');
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: '690px',
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'}}>
<FormControl
fullWidth
size="small"
sx={{
width: "100%",
minWidth: "200px",
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={10}
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}}
>
Показать
</MenuItem>
<MenuItem
value={20}
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}}
>
Скрыть
</MenuItem>
</Select>
</FormControl>
<Typography>если в ответе на вопрос</Typography>
<Box>
<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 value="female" control={<Radio />} label="Все условия обязательны" />
<FormControlLabel value="male" control={<Radio />} label="Обязательно хотя бы одно условие" />
</RadioGroup>
</FormControl>
</Box>
<Box>
<CustomButton
variant="outlined"
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>
</>
);
}

2
src/pages/Questions/answerOptions/responseSettings.tsx
View File

@ -1,6 +1,6 @@
import {Box, Typography} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../../components/icons/InfoIcon";
import InfoIcon from "@icons/InfoIcon";
export default function ResponseSettings() {

10
src/pages/Questions/answerOptions/switchAnswerOptions.tsx
View File

@ -1,8 +1,8 @@
import * as React from 'react';
import UploadImage from "./UploadImage";
import HelpAnswerOptions from "./helpAnswerOptions";
import UploadImage from "../UploadImage";
import HelpQuestions from "../helpQuestions";
import ResponseSettings from "./responseSettings";
import BranchingAnswerOptions from "./branchingAnswerOptions";
import BranchingQuestions from "../branchingQuestions";
interface Props {
@ -16,10 +16,10 @@ export default function SwitchAnswerOptions({switchState = 'setting' }: Props) {
return (<ResponseSettings/>);
break;
case 'help':
return (<HelpAnswerOptions/>);
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingAnswerOptions/>);
return (<BranchingQuestions/>);
break;
case 'image':
return (<UploadImage/>);

218
src/pages/Questions/branchingQuestions.tsx Normal file
View File

@ -0,0 +1,218 @@
import {
Box,
Button,
FormControl, FormControlLabel, Link,
MenuItem,
Modal, Radio, RadioGroup,
Select,
SelectChangeEvent,
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";
export default function BranchingQuestions() {
const theme = useTheme()
const [open, setOpen] = React.useState(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={{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>
</Box>
</Modal>
</>
);
}

13
src/pages/Questions/answerOptions/helpAnswerOptions.tsx → src/pages/Questions/helpQuestions.tsx
View File

@ -1,17 +1,16 @@
import {Box, Button, ButtonBase, Modal, Typography, useTheme} from "@mui/material";
import {Box, ButtonBase, Modal, Typography, useTheme} from "@mui/material";
import * as React from 'react';
import SelectableButton from "../../../components/CreateQuiz/SelectableButton";
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
import CustomTextField from "@ui_kit/CustomTextField";
import {useState} from "react";
import UploadIcon from "../../../components/icons/UploadIcon";
import UploadBox from "../../../components/CreateQuiz/UploadBox";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import CustomButton from "../../../components/CustomButton";
import UploadIcon from "@icons/UploadIcon";
import UploadBox from "../../components/CreateQuiz/UploadBox";
import CustomButton from "../../components/CustomButton";
type BackgroundType = "text" | "video";
type BackgroundTypeModal = "linkVideo" | "ownVideo"
export default function HelpAnswerOptions() {
export default function HelpQuestions() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

3
tsconfig.extend.json
View File

@ -4,6 +4,9 @@
"paths":{
"@ui_kit/*":[
"./ui_kit/*"
],
"@icons/*":[
"./components/icons/*"
]
}
}