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-31 18:48:49 +03:00
parent 8a1e2762b6
commit 152c34e805
38 changed files with 1216 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function FlagIcon({color}: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 27V6" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 21.0016C13 15.0016 19 27.0016 27 21.0016V6.00158C19 12.0016 13 0.00158215 5 6.00158" fill={color}/>
<path d="M5 21.0016C13 15.0016 19 27.0016 27 21.0016V6.00158C19 12.0016 13 0.00158203 5 6.00158" stroke={color} stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

26
src/components/icons/questionsPage/StarIconMini.tsx Normal file
View File

@ -0,0 +1,26 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function StarIconMini({color}: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="28" height="27" viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.551 21.8375L20.851 25.8375C21.6635 26.35 22.6635 25.5875 22.426 24.65L20.601 17.475C20.5516 17.2762 20.5595 17.0674 20.6236 16.8728C20.6877 16.6781 20.8056 16.5056 20.9635 16.375L26.6135 11.6625C27.351 11.05 26.976 9.81253 26.0135 9.75003L18.6385 9.27503C18.4372 9.26332 18.2438 9.19325 18.0817 9.07338C17.9197 8.95351 17.7961 8.78902 17.726 8.60003L14.976 1.67503C14.9032 1.47491 14.7706 1.30204 14.5961 1.17988C14.4217 1.05772 14.2139 0.992188 14.001 0.992188C13.788 0.992188 13.5802 1.05772 13.4058 1.17988C13.2314 1.30204 13.0988 1.47491 13.026 1.67503L10.276 8.60003C10.2059 8.78902 10.0823 8.95351 9.92021 9.07338C9.75816 9.19325 9.5647 9.26332 9.36347 9.27503L1.98847 9.75003C1.02597 9.81253 0.650971 11.05 1.38847 11.6625L7.03847 16.375C7.19639 16.5056 7.3142 16.6781 7.37834 16.8728C7.44247 17.0674 7.45032 17.2762 7.40097 17.475L5.71347 24.125C5.42597 25.25 6.62597 26.1625 7.58847 25.55L13.451 21.8375C13.6154 21.733 13.8062 21.6775 14.001 21.6775C14.1958 21.6775 14.3866 21.733 14.551 21.8375Z" fill={color} stroke={color} stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

31
src/components/icons/questionsPage/addEmoji.tsx Normal file
View File

@ -0,0 +1,31 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function AddEmoji() {
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="M20 31C21.0949 30.9993 22.1837 30.8371 23.2313 30.5187L31 20C31 17.8244 30.3549 15.6977 29.1462 13.8887C27.9375 12.0798 26.2195 10.6699 24.2095 9.83733C22.1995 9.00477 19.9878 8.78693 17.854 9.21137C15.7202 9.6358 13.7602 10.6835 12.2218 12.2218C10.6835 13.7602 9.6358 15.7202 9.21137 17.854C8.78693 19.9878 9.00477 22.1995 9.83733 24.2095C10.6699 26.2195 12.0798 27.9375 13.8887 29.1462C15.6977 30.3549 17.8244 31 20 31Z" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.875 19.083C16.6344 19.083 17.25 18.4674 17.25 17.708C17.25 16.9486 16.6344 16.333 15.875 16.333C15.1156 16.333 14.5 16.9486 14.5 17.708C14.5 18.4674 15.1156 19.083 15.875 19.083Z" fill="#7E2AEA"/>
<path d="M24.125 19.083C24.8844 19.083 25.5 18.4674 25.5 17.708C25.5 16.9486 24.8844 16.333 24.125 16.333C23.3656 16.333 22.75 16.9486 22.75 17.708C22.75 18.4674 23.3656 19.083 24.125 19.083Z" fill="#7E2AEA"/>
<path d="M24.7677 22.75C24.2831 23.5849 23.5878 24.2778 22.7512 24.7595C21.9147 25.2412 20.9663 25.4947 20.001 25.4947C19.0357 25.4947 18.0874 25.2412 17.2508 24.7595C16.4143 24.2778 15.719 23.5849 15.2344 22.75" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

29
src/components/icons/questionsPage/addVideofile.tsx Normal file
View File

@ -0,0 +1,29 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function AddVideofile() {
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="M7.90476 10H22.381C23.3408 10 24.2613 10.4958 24.94 11.3783C25.6187 12.2608 26 13.4578 26 14.7059V28.8235C26 29.1355 25.9047 29.4348 25.735 29.6554C25.5653 29.8761 25.3352 30 25.0952 30H10.619C9.65922 30 8.7387 29.5042 8.05999 28.6217C7.38129 27.7392 7 26.5422 7 25.2941V11.1765C7 10.8645 7.09532 10.5652 7.265 10.3446C7.43467 10.1239 7.6648 10 7.90476 10V10Z" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26 18L32 14V26L26 22" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

25
src/components/icons/questionsPage/hashtagIcon.tsx Normal file
View File

@ -0,0 +1,25 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function HashtagIcon({color}: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 11.3333H29M3 20.6667H29M13.6364 2L8.90909 30M23.0909 2L18.3636 30" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

25
src/components/icons/questionsPage/heartIcon.tsx Normal file
View File

@ -0,0 +1,25 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function HeartIcon({color}: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 27C16 27 3.5 20 3.5 11.5C3.5 9.99737 4.02062 8.54114 4.97328 7.37908C5.92593 6.21703 7.25178 5.42093 8.72525 5.12624C10.1987 4.83154 11.7288 5.05646 13.0551 5.76272C14.3814 6.46898 15.4221 7.61296 16 9.00001C16.5779 7.61296 17.6186 6.46898 18.9449 5.76272C20.2712 5.05646 21.8013 4.83154 23.2748 5.12624C24.7482 5.42093 26.0741 6.21703 27.0267 7.37908C27.9794 8.54114 28.5 9.99737 28.5 11.5C28.5 20 16 27 16 27Z" fill={color} stroke={color} stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function LightbulbIcon({color}: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 29H21" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.83761 20.8739C8.6471 19.9482 7.68288 18.7637 7.01801 17.4102C6.35313 16.0566 6.00504 14.5694 6.00011 13.0614C5.97511 7.6364 10.3376 3.1239 15.7626 2.9989C17.8622 2.94913 19.9242 3.56166 21.6561 4.74961C23.388 5.93756 24.7019 7.64064 25.4115 9.6173C26.1211 11.594 26.1904 13.7439 25.6094 15.7621C25.0285 17.7803 23.827 19.5644 22.1751 20.8614C21.8102 21.1435 21.5146 21.5052 21.311 21.919C21.1073 22.3328 21.001 22.7877 21.0001 23.2489V23.9989C21.0001 24.2641 20.8948 24.5185 20.7072 24.706C20.5197 24.8935 20.2653 24.9989 20.0001 24.9989H12.0001C11.7349 24.9989 11.4805 24.8935 11.293 24.706C11.1055 24.5185 11.0001 24.2641 11.0001 23.9989V23.2489C10.997 22.7912 10.8909 22.34 10.6896 21.9289C10.4884 21.5177 10.1972 21.1572 9.83761 20.8739V20.8739Z" stroke={color} stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.01801 17.4102C7.68288 18.7637 8.6471 19.9482 9.83761 20.8739C10.1972 21.1572 10.4884 21.5177 10.6896 21.9289C10.8909 22.34 10.997 22.7912 11.0001 23.2489V23.9989C11.0001 24.2641 11.1055 24.5185 11.293 24.706C11.4805 24.8935 11.7349 24.9989 12.0001 24.9989H20.0001C20.2653 24.9989 20.5197 24.8935 20.7072 24.706C20.8948 24.5185 21.0001 24.2641 21.0001 23.9989V23.2489C21.001 22.7877 21.1073 22.3328 21.311 21.919C21.5146 21.5052 21.8102 21.1435 22.1751 20.8614C23.827 19.5644 25.0285 17.7803 25.6094 15.7621C26.1904 13.7439 26.1211 11.594 25.4115 9.6173C24.7019 7.64064 23.388 5.93756 21.6561 4.74961C19.9242 3.56166 17.8622 2.94913 15.7626 2.9989C10.3376 3.1239 5.97511 7.6364 6.00011 13.0614C6.00504 14.5694 6.35313 16.0566 7.01801 17.4102ZM17.1464 6.31013C16.7108 6.23629 16.2978 6.52956 16.2239 6.96517C16.1501 7.40078 16.4434 7.81378 16.879 7.88762C17.9379 8.06713 18.915 8.57088 19.6754 9.32936C20.4358 10.0878 20.9421 11.0636 21.1243 12.1221C21.1992 12.5575 21.613 12.8497 22.0484 12.7748C22.4838 12.6998 22.7761 12.2861 22.7011 11.8507C22.4627 10.4657 21.8003 9.18896 20.8053 8.19655C19.8104 7.20413 18.5319 6.545 17.1464 6.31013Z" fill={color}/>
</svg>
</Box>
);
}

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

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function LikeIcon({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="M8 17H14V30H8C7.73478 30 7.48043 29.8946 7.29289 29.7071C7.10536 29.5196 7 29.2652 7 29V18C7 17.7348 7.10536 17.4804 7.29289 17.2929C7.48043 17.1054 7.73478 17 8 17V17Z" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 17L19 7C20.0609 7 21.0783 7.42143 21.8284 8.17157C22.5786 8.92172 23 9.93913 23 11V14H30.7375C31.0211 13.9993 31.3015 14.0593 31.56 14.176C31.8185 14.2926 32.049 14.4632 32.2361 14.6764C32.4232 14.8895 32.5625 15.1402 32.6447 15.4116C32.7268 15.683 32.75 15.9689 32.7125 16.25L31.2125 28.25C31.1518 28.7317 30.918 29.1749 30.5546 29.4969C30.1912 29.8189 29.723 29.9977 29.2375 30H14" fill={color}/>
<path d="M14 17L19 7C20.0609 7 21.0783 7.42143 21.8284 8.17157C22.5786 8.92172 23 9.93913 23 11V14H30.7375C31.0211 13.9993 31.3015 14.0593 31.56 14.176C31.8185 14.2926 32.049 14.4632 32.2361 14.6764C32.4232 14.8895 32.5625 15.1402 32.6447 15.4116C32.7268 15.683 32.75 15.9689 32.7125 16.25L31.2125 28.25C31.1518 28.7317 30.918 29.1749 30.5546 29.4969C30.1912 29.8189 29.723 29.9977 29.2375 30H14" stroke={color} stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

25
src/components/icons/questionsPage/ratingStar.tsx Normal file
View File

@ -0,0 +1,25 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function RatingStar({color}: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="50" height="48" viewBox="0 0 50 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.0576 40.0068L38.1721 47.6836C39.7345 48.6672 41.6574 47.2038 41.2007 45.4045L37.6914 31.6342C37.5965 31.2525 37.6116 30.8518 37.7349 30.4783C37.8582 30.1048 38.0848 29.7736 38.3884 29.523L49.253 20.4787C50.6712 19.3032 49.9501 16.9282 48.0992 16.8082L33.9176 15.8966C33.5307 15.8741 33.1586 15.7396 32.847 15.5096C32.5354 15.2795 32.2977 14.9638 32.1629 14.6011L26.8749 1.31053C26.7349 0.926449 26.4799 0.594665 26.1445 0.360213C25.8091 0.125762 25.4095 0 25 0C24.5905 0 24.1909 0.125762 23.8555 0.360213C23.5201 0.594665 23.2651 0.926449 23.1251 1.31053L17.8371 14.6011C17.7023 14.9638 17.4646 15.2795 17.153 15.5096C16.8414 15.7396 16.4693 15.8741 16.0824 15.8966L1.90076 16.8082C0.0499407 16.9282 -0.671159 19.3032 0.747004 20.4787L11.6116 29.523C11.9152 29.7736 12.1418 30.1048 12.2651 30.4783C12.3884 30.8518 12.4035 31.2525 12.3086 31.6342L9.06369 44.397C8.51085 46.5561 10.8184 48.3074 12.6692 47.1318L23.9424 40.0068C24.2585 39.8061 24.6254 39.6996 25 39.6996C25.3746 39.6996 25.7415 39.8061 26.0576 40.0068Z" fill={color}/>
</svg>
</Box>
);
}

29
src/components/icons/questionsPage/tropfyIcon.tsx Normal file
View File

@ -0,0 +1,29 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function TropfyIcon({color}: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 7V13.8875C7 18.85 10.975 22.9625 15.9375 23C17.1246 23.0082 18.3017 22.7815 19.4008 22.3329C20.5 21.8843 21.4995 21.2227 22.3419 20.3862C23.1843 19.5496 23.8528 18.5547 24.309 17.4586C24.7652 16.3626 25 15.1872 25 14V7C25 6.73478 24.8946 6.48043 24.7071 6.29289C24.5196 6.10536 24.2652 6 24 6H8C7.73478 6 7.48043 6.10536 7.29289 6.29289C7.10536 6.48043 7 6.73478 7 7Z" fill={color} stroke={color} stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 28H20" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 23V28" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24.7754 16H26.0004C27.0613 16 28.0787 15.5786 28.8288 14.8284C29.579 14.0783 30.0004 13.0609 30.0004 12V10C30.0004 9.73478 29.895 9.48043 29.7075 9.29289C29.52 9.10536 29.2656 9 29.0004 9H25.0004" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.25078 16H5.98828C4.92742 16 3.91 15.5786 3.15985 14.8284C2.40971 14.0783 1.98828 13.0609 1.98828 12V10C1.98828 9.73478 2.09364 9.48043 2.28117 9.29289C2.46871 9.10536 2.72306 9 2.98828 9H6.98828" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

52
src/pages/Questions/DataOptions/DataOptions.tsx Normal file
View File

@ -0,0 +1,52 @@
import {Box, Typography, useTheme} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import SwitchData from "./switchData";
import React, {useState} from "react";
import InfoIcon from "@icons/InfoIcon";
import SelectableButton from "../../../components/CreateQuiz/SelectableButton";
type dataType = "calendar" | "mask";
export default function DataOptions() {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
const [dataType, setDataType] = useState<dataType>("calendar");
return (
<>
<Box
sx={{
width: '100%',
maxWidth: '640px',
display: 'flex',
padding: '20px',
flexDirection: 'column',
gap: '20px'}}
>
<Box sx={{gap: '10px', display: 'flex'}}>
<SelectableButton isSelected={dataType === "calendar"} onClick={() => setDataType("calendar")}>
Использовать календарь
</SelectableButton>
<SelectableButton isSelected={dataType === "mask"} onClick={() => setDataType("mask")}>
Использовать маску
</SelectableButton>
</Box>
<Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
<Typography sx={{
fontWeight: 400,
fontSize: '16px',
lineHeight: '18.96px',
color: theme.palette.grey2.main
}}>Пользователю будет предложено выбрать дату</Typography>
<InfoIcon/>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC}/>
<SwitchData switchState={switchState}/>
</>
)
}

21
src/pages/Questions/DataOptions/settingData.tsx Normal file
View File

@ -0,0 +1,21 @@
import {Box, Typography} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "@icons/InfoIcon";
export default function SettingsData() {
return (
<Box sx={{display: 'flex'}}>
<Box sx={{padding: '20px'}}>
<Typography>Настройки календаря</Typography>
<CustomCheckbox label={'Выбор диапозона дат'}/>
<CustomCheckbox label={'Выбор времени'}/>
</Box>
<Box sx={{padding: '20px'}}>
<Typography>Настройки вопросов</Typography>
<CustomCheckbox label={'Необязательный вопрос'}/>
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
</Box>
</Box>
);
};

26
src/pages/Questions/DataOptions/switchData.tsx Normal file
View File

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

56
src/pages/Questions/DropDown/DropDown.tsx Normal file
View File

@ -0,0 +1,56 @@
import {Box, Typography, Link, useTheme} from "@mui/material";
import React from "react";
import EnterIcon from "../../../components/icons/questionsPage/enterIcon";
import SwitchDropDown from "./switchDropDown";
import ButtonsOptions from "../ButtonsOptions";
export default function DropDown() {
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'}}>
<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}/>
<SwitchDropDown switchState={switchState}/>
</>
)
}

25
src/pages/Questions/DropDown/settingDropDown.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 SettingDropDown() {
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>
</>
)
}

26
src/pages/Questions/DropDown/switchDropDown.tsx Normal file
View File

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

58
src/pages/Questions/Emoji/Emoji.tsx Normal file
View File

@ -0,0 +1,58 @@
import {Box, Link, Typography, useTheme} from "@mui/material";
import EnterIcon from "@icons/questionsPage/enterIcon";
import ButtonsOptions from "../ButtonsOptions";
import SwitchEmoji from "./switchEmoji";
import React from "react";
import AddEmoji from "@icons/questionsPage/addEmoji";
export default function Emoji() {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
return (
<>
<Box sx={{ padding: '20px'}}>
<Box sx={{display: 'flex', alignItems: 'center', paddingBottom: '25px'}}>
<AddEmoji/>
<Typography
sx={{
padding: '0 0 0 20px',
fontWeight: 400,
fontSize: '18px',
lineHeight: '21.33px',
color: theme.palette.grey2.main
}}
>
Добавьте ответ
</Typography>
</Box>
<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>
<ButtonsOptions switchState={switchState} SSHC={SSHC}/>
<SwitchEmoji switchState={switchState}/>
</>
)
}

21
src/pages/Questions/Emoji/settingEmoji.tsx Normal file
View File

@ -0,0 +1,21 @@
import {Box, Typography} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "@icons/InfoIcon";
export default function SettingEmoji() {
return (
<Box sx={{display: 'flex'}}>
<Box sx={{padding: '20px'}}>
<Typography>Настройки ответов</Typography>
<CustomCheckbox label={'Можно несколько'}/>
<CustomCheckbox label={'Вариант "свой ответ"'}/>
</Box>
<Box sx={{padding: '20px'}}>
<Typography>Настройки вопросов</Typography>
<CustomCheckbox label={'Необязательный вопрос'}/>
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
</Box>
</Box>
);
};

26
src/pages/Questions/Emoji/switchEmoji.tsx Normal file
View File

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

27
src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
View File

@ -14,19 +14,22 @@ export default function OptionsAndPicture() {
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'}}>
<Box sx={{display: 'flex', alignItems: 'center', paddingBottom: '25px'}}>
<AddImage/>
<Typography
sx={{
padding: '0 0 0 20px',
fontWeight: 400,
fontSize: '18px',
lineHeight: '21.33px',
color: theme.palette.grey2.main
}}
>
Добавьте ответ
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
<Link
component="button"
variant="body2"

27
src/pages/Questions/OptionsPicture/OptionsPicture.tsx
View File

@ -25,19 +25,22 @@ export default function OptionsPicture() {
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'}}>
<Box sx={{display: 'flex', alignItems: 'center', paddingBottom: '25px'}}>
<AddImage/>
<Typography
sx={{
padding: '0 0 0 20px',
fontWeight: 400,
fontSize: '18px',
lineHeight: '21.33px',
color: theme.palette.grey2.main
}}
>
Добавьте ответ
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
<Link
component="button"
variant="body2"

40
src/pages/Questions/OwnTextField/OwnTextField.tsx Normal file
View File

@ -0,0 +1,40 @@
import {Box, Typography, useTheme} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import SwitchTextField from "./switchTextField";
import React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "@icons/InfoIcon";
export default function OwnTextField() {
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'}}>
<Typography sx={{
fontWeight: 400,
fontSize: '16px',
lineHeight: '18.96px',
color: theme.palette.grey2.main
}}>Пользователю будет дано поле для ввода значения </Typography>
<InfoIcon/>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC}/>
<SwitchTextField switchState={switchState}/>
</>
)
}

38
src/pages/Questions/OwnTextField/settingTextField.tsx Normal file
View File

@ -0,0 +1,38 @@
import {Box, FormControl, FormControlLabel, Radio, RadioGroup, Typography, useTheme} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "@icons/InfoIcon";
import * as React from "react";
export default function SettingEmoji() {
const [value, setValue] = React.useState('1');
const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue((event.target as HTMLInputElement).value);
};
const theme = useTheme()
return (
<Box sx={{display: 'flex'}}>
<Box sx={{padding: '20px'}}>
<Typography>Настройки ответов</Typography>
<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="Многострочное" />
<FormControlLabel sx={{color: theme.palette.grey2.main}} value="3" control={<Radio />} label="Только числа" />
</RadioGroup>
</FormControl>
</Box>
<Box sx={{padding: '20px'}}>
<Typography>Настройки вопросов</Typography>
<CustomCheckbox label={'Автозаполнение адреса'}/>
<CustomCheckbox label={'Необязательный вопрос'}/>
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
</Box>
</Box>
);
};

26
src/pages/Questions/OwnTextField/switchTextField.tsx Normal file
View File

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

49
src/pages/Questions/PageOptions/PageOptions.tsx Normal file
View File

@ -0,0 +1,49 @@
import {Box, Typography, useTheme} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
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}/>
</>
)
}

13
src/pages/Questions/PageOptions/SettingPageOptions.tsx Normal file
View File

@ -0,0 +1,13 @@
import {Box, Typography} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "@icons/InfoIcon";
export default function SettingPageOptions() {
return (
<Box sx={{display: 'flex', flexDirection: 'column', padding: '20px'}}>
<Typography>Настройки вопроса</Typography>
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
</Box>
);
};

25
src/pages/Questions/PageOptions/switchPageOptions.tsx Normal file
View File

@ -0,0 +1,25 @@
import BranchingQuestions from "../branchingQuestions";
import HelpQuestions from "../helpQuestions";
import SettingPageOptions from "./SettingPageOptions";
interface Props {
switchState: string,
}
export default function SwitchPageOptions({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingPageOptions/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
default:
return (<></>)
}
}

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

@ -1,8 +1,5 @@
import React from "react";
import Stepper from '@ui_kit/Stepper';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import {Box, Button, IconButton, Typography, Paper, useTheme} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import CustomTextField from "@ui_kit/CustomTextField";
@ -14,6 +11,14 @@ import TypeQuestions from "./TypeQuestions";
import AnswerOptions from "./answerOptions/AnswerOptions";
import OptionsPicture from "./OptionsPicture/OptionsPicture";
import OptionsAndPicture from "./OptionsAndPicture/OptionsAndPicture";
import Emoji from "./Emoji/Emoji";
import OwnTextField from "./OwnTextField/OwnTextField";
import DropDown from "./DropDown/DropDown";
import DataOptions from "./DataOptions/DataOptions";
import SliderOptions from "./SliderOptions/SliderOptions";
import UploadFile from "./UploadFile/UploadFile";
import PageOptions from "./PageOptions/PageOptions";
import RatingOptions from "./RatingOptions/RatingOptions";
export default function QuestionsPage() {
@ -49,6 +54,14 @@ export default function QuestionsPage() {
<AnswerOptions/>
<OptionsPicture/>
<OptionsAndPicture/>
<Emoji/>
<OwnTextField/>
<DropDown/>
<DataOptions/>
<SliderOptions/>
<UploadFile/>
<PageOptions/>
<RatingOptions/>
</Paper>
</Paper>
<Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>

44
src/pages/Questions/RatingOptions/RatingOptions.tsx Normal file
View File

@ -0,0 +1,44 @@
import {Box, Typography, useTheme} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import React from "react";
import Rating from '@mui/material/Rating';
import RatingStar from "@icons/questionsPage/ratingStar";
import SwitchRating from "./switchRating";
export default function RatingOptions() {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
return (
<>
<Box
sx={{
width: '100%',
maxWidth: '310px',
display: 'flex',
padding: '20px',
flexDirection: 'column',
gap: '20px'}}
>
<Rating
name="customized-color"
defaultValue={2}
getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`}
precision={1}
icon={<RatingStar color={theme.palette.brightPurple.main}/>}
emptyIcon={<RatingStar color={"#9A9AAF"}/>}
sx={{display: 'flex', gap: '15px'}}
/>
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
<Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Негативно</Typography>
<Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Позитивно</Typography>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC}/>
<SwitchRating switchState={switchState}/>
</>
)
}

61
src/pages/Questions/RatingOptions/settingRating.tsx Normal file
View File

@ -0,0 +1,61 @@
import {Box, ButtonBase, Slider, Typography, useTheme} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "@icons/InfoIcon";
import React from "react";
import RatingStar from "@icons/questionsPage/ratingStar";
import TropfyIcon from "@icons/questionsPage/tropfyIcon";
import FlagIcon from "@icons/questionsPage/FlagIcon";
import HeartIcon from "@icons/questionsPage/heartIcon";
import LikeIcon from "@icons/questionsPage/likeIcon";
import LightbulbIcon from "@icons/questionsPage/lightbulbIcon";
import HashtagIcon from "@icons/questionsPage/hashtagIcon";
import StarIconMini from "@icons/questionsPage/StarIconMini";
export default function SettingSlider() {
const theme = useTheme();
const [current, setCurrent] = React.useState(1)
const buttonRatingForm: {icon: JSX.Element} [] =[
{icon: <StarIconMini color={theme.palette.grey3.main}/>},
{icon: <TropfyIcon color={theme.palette.grey3.main}/>},
{icon: <FlagIcon color={theme.palette.grey3.main}/>},
{icon: <HeartIcon color={theme.palette.grey3.main}/>},
{icon: <LikeIcon color={theme.palette.grey3.main}/>},
{icon: <LightbulbIcon color={theme.palette.grey3.main}/>},
{icon: <HashtagIcon color={theme.palette.grey3.main}/>},
]
return (
<Box sx={{display: 'flex'}}>
<Box sx={{padding: '20px'}}>
<Typography sx={{marginBottom: '15px'}}>Настройки рейтинга</Typography>
<Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Форма</Typography>
<Box sx={{display: 'flex', marginBottom: '15px' }}>
{buttonRatingForm.map( (e,i) => (
<ButtonBase
key={i}
onClick={()=>{setCurrent(i)}}
sx={{backgroundColor: current === i ? theme.palette.brightPurple.main : 'transparent',
color: current === i ? '#ffffff' : theme.palette.grey3.main,
width: '40px',
height: '40px',
borderRadius: '4px'
}}
>
{e.icon}
</ButtonBase>
))}
</Box>
<Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Количество</Typography>
<Slider defaultValue={5} min={1} max={10} aria-label="Default" valueLabelDisplay="auto" sx={{color: theme.palette.brightPurple.main}} />
</Box>
<Box sx={{padding: '20px'}}>
<Typography>Настройки вопросов</Typography>
<CustomCheckbox label={'Необязательный вопрос'}/>
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
</Box>
</Box>
);
};

25
src/pages/Questions/RatingOptions/switchRating.tsx Normal file
View File

@ -0,0 +1,25 @@
import BranchingQuestions from "../branchingQuestions";
import HelpQuestions from "../helpQuestions";
import SettingRating from "./settingRating";
interface Props {
switchState: string,
}
export default function SwitchRating({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
return (<SettingRating/>);
break;
case 'help':
return (<HelpQuestions/>);
break
case 'branching':
return (<BranchingQuestions/>);
break;
default:
return (<></>)
}
}

50
src/pages/Questions/SliderOptions/SliderOptions.tsx Normal file
View File

@ -0,0 +1,50 @@
import {Box, Typography, useTheme} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import SwitchSlider from "./switchSlider";
export default function SliderOptions() {
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={{gap: '10px', display: 'flex', flexDirection: 'column'}}>
<Typography>Выбор значения из диапазона</Typography>
<Box sx={{display: 'flex', alignItems: 'center', gap: '20px'}}>
<CustomTextField placeholder={'0'} text={''}/>
<Typography>—</Typography>
<CustomTextField placeholder={'100'} text={''}/>
</Box>
</Box>
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
<Box>
<Typography>Начальное значение</Typography>
<CustomTextField placeholder={'50'} text={''}/>
</Box>
<Box>
<Typography>Шаг</Typography>
<CustomTextField placeholder={'1'} text={''}/>
</Box>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC}/>
<SwitchSlider switchState={switchState}/>
</>
)
}

20
src/pages/Questions/SliderOptions/settingSlider.tsx Normal file
View File

@ -0,0 +1,20 @@
import {Box, Typography} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "@icons/InfoIcon";
export default function SettingSlider() {
return (
<Box sx={{display: 'flex'}}>
<Box sx={{padding: '20px'}}>
<Typography>Настройки ползунка</Typography>
<CustomCheckbox label={'Выбор диапозона (два ползунка)'}/>
</Box>
<Box sx={{padding: '20px'}}>
<Typography>Настройки вопросов</Typography>
<CustomCheckbox label={'Необязательный вопрос'}/>
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
</Box>
</Box>
);
};

26
src/pages/Questions/SliderOptions/switchSlider.tsx Normal file
View File

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

129
src/pages/Questions/UploadFile/UploadFile.tsx Normal file
View File

@ -0,0 +1,129 @@
import {Box, FormControl, MenuItem, Select, SelectChangeEvent, Typography, useTheme} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import React, {useState} from "react";
import InfoIcon from "@icons/InfoIcon";
import ArrowDown from "@icons/ArrowDownIcon";
import SwitchUpload from "./switchUpload";
export default function UploadFile() {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
const designTypes = [
["Все типы файлов"],
["Изображения"],
["Видео"],
["Аудио"],
["Документ"]
]
const [designType, setDesignType] = useState(designTypes[0][0]);
const handleChange = (event: SelectChangeEvent) => {
setDesignType(event.target.value);
}
return (
<>
<Box
sx={{
width: '100%',
maxWidth: '640px',
display: 'flex',
padding: '20px',
flexDirection: 'column',
gap: '20px'}}
>
<Box sx={{gap: '10px', display: 'flex'}}>
<FormControl
fullWidth
size="small"
sx={{
width: "100%",
minWidth: "200px",
height: "48px",
}}
>
<Select
id="category-select"
variant="outlined"
value={designType}
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} />}
>
{designTypes.map(type =>
<MenuItem
key={type[0]}
value={type[0]}
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}}
>
{type[0]}
</MenuItem>
)}
</Select>
</FormControl>
</Box>
<Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
<Typography sx={{
fontWeight: 400,
fontSize: '16px',
lineHeight: '18.96px',
color: theme.palette.grey2.main
}}>Пользователь может загрузить любой собственный файл</Typography>
<InfoIcon/>
</Box>
</Box>
<ButtonsOptions switchState={switchState} SSHC={SSHC}/>
<SwitchUpload switchState={switchState}/>
</>
)
}

15
src/pages/Questions/UploadFile/settingUpload.tsx Normal file
View File

@ -0,0 +1,15 @@
import {Box, Typography} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "@icons/InfoIcon";
export default function SettingsUpload() {
return (
<Box sx={{display: 'flex', flexDirection: 'column', padding: '20px'}}>
<Typography>Настройки вопроса</Typography>
<CustomCheckbox label={'Автозаполнение адреса'}/>
<CustomCheckbox label={'Необязательный вопрос'}/>
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
</Box>
);
};

26
src/pages/Questions/UploadFile/switchUpload.tsx Normal file
View File

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

3
src/pages/Questions/UploadImage.tsx
View File

@ -3,7 +3,7 @@ import UploadBox from "../../components/CreateQuiz/UploadBox";
import UploadIcon from "@icons/UploadIcon";
import * as React from "react";
const Modalka = ({open, handleClose, imgHC}:any) => {
const Modalka = ({imgHC}:any) => {
const theme = useTheme();
const dropZone = React.useRef<any>(null);
@ -79,7 +79,6 @@ export default function UploadImage () {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const imgHC = (imgInp:any) => {
const [file] = imgInp.files
setImg(URL.createObjectURL(file))