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

поменяла настройки иконок для страницы вопросов, добавила стор для ответов(нужны доработки)

Browse Source
This commit is contained in:
Tamara 2023-07-06 18:54:12 +03:00
parent e842f1de5c
commit bb6b5d3cdf
19 changed files with 373 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/assets/icons/questionsPage/answer.tsx
View File

@ -1,29 +1,31 @@
import { Box } from "@mui/material";
import {Box, SxProps, Theme} from "@mui/material";
// interface Props {
// color: string;
// }
interface Props {
color: string;
sx?: SxProps<Theme>
}
export default function Answer() {
export default function Answer({color, sx}: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
width: "45px" ,
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.125 29H2.875C1.83947 29 1 29.2239 1 29.5V38.5C1 38.7761 1.83947 39 2.875 39H44.125C45.1605 39 46 38.7761 46 38.5V29.5C46 29.2239 45.1605 29 44.125 29Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="6.13415" cy="34.1341" r="2.13415" fill="#9A9AAF"/>
<path d="M44.125 15H2.875C1.83947 15 1 15.2239 1 15.5V24.5C1 24.7761 1.83947 25 2.875 25H44.125C45.1605 25 46 24.7761 46 24.5V15.5C46 15.2239 45.1605 15 44.125 15Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="6.13415" cy="20.1341" r="2.13415" fill="#9A9AAF"/>
<path d="M44.125 1H2.875C1.83947 1 1 1.22386 1 1.5V10.5C1 10.7761 1.83947 11 2.875 11H44.125C45.1605 11 46 10.7761 46 10.5V1.5C46 1.22386 45.1605 1 44.125 1Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="6.13415" cy="6.13415" r="2.13415" fill="#9A9AAF"/>
<path d="M44.125 29H2.875C1.83947 29 1 29.2239 1 29.5V38.5C1 38.7761 1.83947 39 2.875 39H44.125C45.1605 39 46 38.7761 46 38.5V29.5C46 29.2239 45.1605 29 44.125 29Z" stroke={color} strokeWidth="2" strokeLinecap="round" stroke-Linejoin="round"/>
<circle cx="6.13415" cy="34.1341" r="2.13415" fill={color}/>
<path d="M44.125 15H2.875C1.83947 15 1 15.2239 1 15.5V24.5C1 24.7761 1.83947 25 2.875 25H44.125C45.1605 25 46 24.7761 46 24.5V15.5C46 15.2239 45.1605 15 44.125 15Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="6.13415" cy="20.1341" r="2.13415" fill={color}/>
<path d="M44.125 1H2.875C1.83947 1 1 1.22386 1 1.5V10.5C1 10.7761 1.83947 11 2.875 11H44.125C45.1605 11 46 10.7761 46 10.5V1.5C46 1.22386 45.1605 1 44.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="6.13415" cy="6.13415" r="2.13415" fill={color}/>
</svg>
</Box>

38
src/assets/icons/questionsPage/date.tsx
View File

@ -1,11 +1,12 @@
import { Box } from "@mui/material";
import {Box, SxProps, Theme} from "@mui/material";
// interface Props {
// color: string;
// }
interface Props {
color: string;
sx?: SxProps<Theme>
}
export default function Date() {
export default function Date({color, sx}: Props) {
return (
<Box
@ -15,22 +16,23 @@ export default function Date() {
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="43" viewBox="0 0 47 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.125 4H2.875C1.83947 4 1 4.85066 1 5.9V40.1C1 41.1493 1.83947 42 2.875 42H44.125C45.1605 42 46 41.1493 46 40.1V5.9C46 4.85066 45.1605 4 44.125 4Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 15H46" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 28H11.8" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 22H11.8" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 34H11.8" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 28H25.8" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 22H25.8" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 34H25.8" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M35 28H39.8" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M35 22H39.8" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M35 34H39.8" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 9L10 1" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M38 9L38 1" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M44.125 4H2.875C1.83947 4 1 4.85066 1 5.9V40.1C1 41.1493 1.83947 42 2.875 42H44.125C45.1605 42 46 41.1493 46 40.1V5.9C46 4.85066 45.1605 4 44.125 4Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M1 15H46" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M7 28H11.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M7 22H11.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M7 34H11.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M21 28H25.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M21 22H25.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M21 34H25.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M35 28H39.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M35 22H39.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M35 34H39.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M10 9L10 1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M38 9L38 1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>

20
src/assets/icons/questionsPage/download.tsx
View File

@ -1,11 +1,12 @@
import { Box } from "@mui/material";
import {Box, SxProps, Theme} from "@mui/material";
// interface Props {
// color: string;
// }
interface Props {
color: string;
sx?: SxProps<Theme>
}
export default function Download() {
export default function Download({color, sx}: Props) {
return (
<Box
@ -15,13 +16,14 @@ export default function Download() {
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="42" viewBox="0 0 47 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33.8846 26.8076H44.2692C44.7283 26.8076 45.1685 26.9551 45.4931 27.2177C45.8177 27.4802 46 27.8363 46 28.2076V39.4076C46 39.7789 45.8177 40.135 45.4931 40.3976C45.1685 40.6601 44.7283 40.8076 44.2692 40.8076H2.73077C2.27174 40.8076 1.83151 40.6601 1.50693 40.3976C1.18235 40.135 1 39.7789 1 39.4076V28.2076C1 27.8363 1.18235 27.4802 1.50693 27.2177C1.83151 26.9551 2.27174 26.8076 2.73077 26.8076H13.1154" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23.5 27V1" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.1155 11.3846L23.5001 1L33.8847 11.3846" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M39.135 36.0776C40.3141 36.0776 41.27 35.1217 41.27 33.9426C41.27 32.7635 40.3141 31.8076 39.135 31.8076C37.9559 31.8076 37 32.7635 37 33.9426C37 35.1217 37.9559 36.0776 39.135 36.0776Z" fill="#9A9AAF"/>
<path d="M33.8846 26.8076H44.2692C44.7283 26.8076 45.1685 26.9551 45.4931 27.2177C45.8177 27.4802 46 27.8363 46 28.2076V39.4076C46 39.7789 45.8177 40.135 45.4931 40.3976C45.1685 40.6601 44.7283 40.8076 44.2692 40.8076H2.73077C2.27174 40.8076 1.83151 40.6601 1.50693 40.3976C1.18235 40.135 1 39.7789 1 39.4076V28.2076C1 27.8363 1.18235 27.4802 1.50693 27.2177C1.83151 26.9551 2.27174 26.8076 2.73077 26.8076H13.1154" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M23.5 27V1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M13.1155 11.3846L23.5001 1L33.8847 11.3846" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M39.135 36.0776C40.3141 36.0776 41.27 35.1217 41.27 33.9426C41.27 32.7635 40.3141 31.8076 39.135 31.8076C37.9559 31.8076 37 32.7635 37 33.9426C37 35.1217 37.9559 36.0776 39.135 36.0776Z" fill={color}/>
</svg>
</Box>

28
src/assets/icons/questionsPage/drop_down.tsx
View File

@ -1,11 +1,12 @@
import { Box } from "@mui/material";
import {Box, SxProps, Theme} from "@mui/material";
// interface Props {
// color: string;
// }
interface Props {
color: string;
sx?: SxProps<Theme>
}
export default function DropDown() {
export default function DropDown({color, sx}: Props) {
return (
<Box
@ -15,17 +16,18 @@ export default function DropDown() {
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M44.125 1H2.875C1.83947 1 1 1.20147 1 1.45V9.55C1 9.79853 1.83947 10 2.875 10H44.125C45.1605 10 46 9.79853 46 9.55V1.45C46 1.20147 45.1605 1 44.125 1Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 16H32" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 27.333H32" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 21.667H32" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 33H32" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M34 9L34 1" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M38 5L40 7L42 5" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M44.125 1H2.875C1.83947 1 1 1.20147 1 1.45V9.55C1 9.79853 1.83947 10 2.875 10H44.125C45.1605 10 46 9.79853 46 9.55V1.45C46 1.20147 45.1605 1 44.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M5 16H32" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M5 27.333H32" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M5 21.667H32" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M5 33H32" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M34 9L34 1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M38 5L40 7L42 5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);

20
src/assets/icons/questionsPage/emoji.tsx
View File

@ -1,11 +1,12 @@
import { Box } from "@mui/material";
import {Box, SxProps, Theme} from "@mui/material";
// interface Props {
// color: string;
// }
interface Props {
color: string;
sx?: SxProps<Theme>
}
export default function Emoji() {
export default function Emoji({color, sx}: Props) {
return (
<Box
@ -15,13 +16,14 @@ export default function Emoji() {
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 31C17.493 30.999 18.9777 30.7779 20.4063 30.3438L31 16C31 13.0333 30.1203 10.1332 28.472 7.66645C26.8238 5.19972 24.4811 3.27713 21.7403 2.14181C18.9994 1.0065 15.9834 0.709449 13.0736 1.28823C10.1639 1.86701 7.49119 3.29562 5.3934 5.3934C3.29562 7.49119 1.86701 10.1639 1.28823 13.0736C0.709449 15.9834 1.0065 18.9994 2.14181 21.7403C3.27713 24.4811 5.19972 26.8238 7.66645 28.472C10.1332 30.1203 13.0333 31 16 31Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.375 14.75C11.4105 14.75 12.25 13.9105 12.25 12.875C12.25 11.8395 11.4105 11 10.375 11C9.33947 11 8.5 11.8395 8.5 12.875C8.5 13.9105 9.33947 14.75 10.375 14.75Z" fill="#9A9AAF"/>
<path d="M21.625 14.75C22.6605 14.75 23.5 13.9105 23.5 12.875C23.5 11.8395 22.6605 11 21.625 11C20.5895 11 19.75 11.8395 19.75 12.875C19.75 13.9105 20.5895 14.75 21.625 14.75Z" fill="#9A9AAF"/>
<path d="M22.5 19.75C21.8392 20.8884 20.891 21.8334 19.7503 22.4902C18.6095 23.147 17.3163 23.4927 16 23.4927C14.6837 23.4927 13.3905 23.147 12.2497 22.4902C11.109 21.8334 10.1608 20.8884 9.5 19.75" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 31C17.493 30.999 18.9777 30.7779 20.4063 30.3438L31 16C31 13.0333 30.1203 10.1332 28.472 7.66645C26.8238 5.19972 24.4811 3.27713 21.7403 2.14181C18.9994 1.0065 15.9834 0.709449 13.0736 1.28823C10.1639 1.86701 7.49119 3.29562 5.3934 5.3934C3.29562 7.49119 1.86701 10.1639 1.28823 13.0736C0.709449 15.9834 1.0065 18.9994 2.14181 21.7403C3.27713 24.4811 5.19972 26.8238 7.66645 28.472C10.1332 30.1203 13.0333 31 16 31Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M10.375 14.75C11.4105 14.75 12.25 13.9105 12.25 12.875C12.25 11.8395 11.4105 11 10.375 11C9.33947 11 8.5 11.8395 8.5 12.875C8.5 13.9105 9.33947 14.75 10.375 14.75Z" fill={color}/>
<path d="M21.625 14.75C22.6605 14.75 23.5 13.9105 23.5 12.875C23.5 11.8395 22.6605 11 21.625 11C20.5895 11 19.75 11.8395 19.75 12.875C19.75 13.9105 20.5895 14.75 21.625 14.75Z" fill={color}/>
<path d="M22.5 19.75C21.8392 20.8884 20.891 21.8334 19.7503 22.4902C18.6095 23.147 17.3163 23.4927 16 23.4927C14.6837 23.4927 13.3905 23.147 12.2497 22.4902C11.109 21.8334 10.1608 20.8884 9.5 19.75" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);

19
src/assets/icons/questionsPage/input.tsx
View File

@ -1,11 +1,11 @@
import { Box } from "@mui/material";
import {Box, SxProps, Theme} from "@mui/material";
// interface Props {
// color: string;
// }
export default function Input() {
interface Props {
color: string;
sx?: SxProps<Theme>
}
export default function Input({color, sx}: Props) {
return (
<Box
@ -15,12 +15,13 @@ export default function Input() {
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 9H42" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 14H30" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M6 9H42" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M6 14H30" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);

28
src/assets/icons/questionsPage/options_and_pict.tsx
View File

@ -1,11 +1,12 @@
import { Box } from "@mui/material";
import {Box, SxProps, Theme} from "@mui/material";
// interface Props {
// color: string;
// }
interface Props {
color: string;
sx?: SxProps<Theme>
}
export default function optionsAndPict() {
export default function optionsAndPict({color, sx}: Props) {
return (
<Box
@ -15,17 +16,18 @@ export default function optionsAndPict() {
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.125 29H1.875C1.39175 29 1 29.2239 1 29.5V38.5C1 38.7761 1.39175 39 1.875 39H21.125C21.6082 39 22 38.7761 22 38.5V29.5C22 29.2239 21.6082 29 21.125 29Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="6.13415" cy="34.1341" r="2.13415" fill="#9A9AAF"/>
<path d="M21.125 15H1.875C1.39175 15 1 15.2239 1 15.5V24.5C1 24.7761 1.39175 25 1.875 25H21.125C21.6082 25 22 24.7761 22 24.5V15.5C22 15.2239 21.6082 15 21.125 15Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="6.13415" cy="20.1341" r="2.13415" fill="#9A9AAF"/>
<path d="M21.125 1H1.875C1.39175 1 1 1.22386 1 1.5V10.5C1 10.7761 1.39175 11 1.875 11H21.125C21.6082 11 22 10.7761 22 10.5V1.5C22 1.22386 21.6082 1 21.125 1Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="6.13415" cy="6.13415" r="2.13415" fill="#9A9AAF"/>
<path d="M45.1667 1H26.8333C26.3731 1 26 1.85066 26 2.9V37.1C26 38.1493 26.3731 39 26.8333 39H45.1667C45.6269 39 46 38.1493 46 37.1V2.9C46 1.85066 45.6269 1 45.1667 1Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="31.1341" cy="6.13415" r="2.13415" fill="#9A9AAF"/>
<path d="M21.125 29H1.875C1.39175 29 1 29.2239 1 29.5V38.5C1 38.7761 1.39175 39 1.875 39H21.125C21.6082 39 22 38.7761 22 38.5V29.5C22 29.2239 21.6082 29 21.125 29Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="6.13415" cy="34.1341" r="2.13415" fill={color}/>
<path d="M21.125 15H1.875C1.39175 15 1 15.2239 1 15.5V24.5C1 24.7761 1.39175 25 1.875 25H21.125C21.6082 25 22 24.7761 22 24.5V15.5C22 15.2239 21.6082 15 21.125 15Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="6.13415" cy="20.1341" r="2.13415" fill={color}/>
<path d="M21.125 1H1.875C1.39175 1 1 1.22386 1 1.5V10.5C1 10.7761 1.39175 11 1.875 11H21.125C21.6082 11 22 10.7761 22 10.5V1.5C22 1.22386 21.6082 1 21.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="6.13415" cy="6.13415" r="2.13415" fill={color}/>
<path d="M45.1667 1H26.8333C26.3731 1 26 1.85066 26 2.9V37.1C26 38.1493 26.3731 39 26.8333 39H45.1667C45.6269 39 46 38.1493 46 37.1V2.9C46 1.85066 45.6269 1 45.1667 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="31.1341" cy="6.13415" r="2.13415" fill={color}/>
</svg>
</Box>
);

20
src/assets/icons/questionsPage/options_pict.tsx
View File

@ -1,11 +1,12 @@
import { Box } from "@mui/material";
import {Box, SxProps, Theme} from "@mui/material";
// interface Props {
// color: string;
// }
interface Props {
color: string;
sx?: SxProps<Theme>
}
export default function optionsPict() {
export default function optionsPict({color, sx}: Props) {
return (
<Box
@ -15,13 +16,14 @@ export default function optionsPict() {
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.1667 1H1.83333C1.3731 1 1 1.85066 1 2.9V37.1C1 38.1493 1.3731 39 1.83333 39H20.1667C20.6269 39 21 38.1493 21 37.1V2.9C21 1.85066 20.6269 1 20.1667 1Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M45.1667 1H26.8333C26.3731 1 26 1.85066 26 2.9V37.1C26 38.1493 26.3731 39 26.8333 39H45.1667C45.6269 39 46 38.1493 46 37.1V2.9C46 1.85066 45.6269 1 45.1667 1Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="6.13415" cy="6.13415" r="2.13415" fill="#9A9AAF"/>
<circle cx="31.1341" cy="6.13415" r="2.13415" fill="#9A9AAF"/>
<path d="M20.1667 1H1.83333C1.3731 1 1 1.85066 1 2.9V37.1C1 38.1493 1.3731 39 1.83333 39H20.1667C20.6269 39 21 38.1493 21 37.1V2.9C21 1.85066 20.6269 1 20.1667 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M45.1667 1H26.8333C26.3731 1 26 1.85066 26 2.9V37.1C26 38.1493 26.3731 39 26.8333 39H45.1667C45.6269 39 46 38.1493 46 37.1V2.9C46 1.85066 45.6269 1 45.1667 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="6.13415" cy="6.13415" r="2.13415" fill={color}/>
<circle cx="31.1341" cy="6.13415" r="2.13415" fill={color}/>
</svg>
</Box>
);

26
src/assets/icons/questionsPage/page.tsx
View File

@ -1,11 +1,12 @@
import { Box } from "@mui/material";
import {Box, SxProps, Theme} from "@mui/material";
// interface Props {
// color: string;
// }
interface Props {
color: string;
sx?: SxProps<Theme>
}
export default function Page() {
export default function Page({color, sx}: Props) {
return (
<Box
@ -15,16 +16,17 @@ export default function Page() {
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 11H46" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 6H41" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 30.5L14 19.5L29 33.5" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="24.1341" cy="20.1341" r="2.13415" fill="#9A9AAF"/>
<path d="M25 29L32 22" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M32 22L46 33" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M1 11H46" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M6 6H41" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M1 30.5L14 19.5L29 33.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="24.1341" cy="20.1341" r="2.13415" fill={color}/>
<path d="M25 29L32 22" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M32 22L46 33" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);

15
src/assets/icons/questionsPage/rating.tsx
View File

@ -1,11 +1,11 @@
import { Box } from "@mui/material";
import {Box, SxProps, Theme} from "@mui/material";
// interface Props {
// color: string;
// }
export default function Rating() {
interface Props {
color: string;
sx?: SxProps<Theme>
}
export default function Rating({color, sx}: Props) {
return (
<Box
@ -15,10 +15,11 @@ export default function Rating() {
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="45" height="46" viewBox="0 0 45 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 1L27.5516 16.5471H43.8988L30.6736 26.1558L35.7252 41.7029L22.5 32.0942L9.27483 41.7029L14.3264 26.1558L1.10123 16.5471H17.4484L22.5 1Z" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.5 1L27.5516 16.5471H43.8988L30.6736 26.1558L35.7252 41.7029L22.5 32.0942L9.27483 41.7029L14.3264 26.1558L1.10123 16.5471H17.4484L22.5 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);

16
src/assets/icons/questionsPage/slider.tsx
View File

@ -1,11 +1,12 @@
import { Box } from "@mui/material";
import {Box, SxProps, Theme} from "@mui/material";
// interface Props {
// color: string;
// }
interface Props {
color: string;
sx?: SxProps<Theme>
}
export default function Slider() {
export default function Slider({color, sx}: Props) {
return (
<Box
@ -15,11 +16,12 @@ export default function Slider() {
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="19" viewBox="0 0 47 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38 15H41C43.7614 15 46 12.7614 46 10V8C46 5.23858 43.7614 3 41 3H36M23.5 15H6C3.23858 15 1 12.7614 1 10V8C1 5.23858 3.23858 3 6 3H24.5" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="30.5" cy="9.5" r="8.5" stroke="#9A9AAF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M38 15H41C43.7614 15 46 12.7614 46 10V8C46 5.23858 43.7614 3 41 3H36M23.5 15H6C3.23858 15 1 12.7614 1 10V8C1 5.23858 3.23858 3 6 3H24.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="30.5" cy="9.5" r="8.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);

13
src/pages/ContactFormPage/ContactFormPage.tsx
View File

@ -12,17 +12,20 @@ import SwitchContactForm from "./switchContactForm";
import DrawerNewField from "./DrawerParent";
import WindowNewField from "./NewField/WindowNewField";
import WindowMessengers from "./Massengers/WindowMessengers";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";
export default function ContactFormPage() {
const {listQuizes, updateQuizesList} = quizStore();
const params = Number(useParams().quizId);
const handleNext = () => {
updateQuizesList(params, {step: listQuizes[params].step + 1})
}
const [activeStep, setActiveStep] = React.useState(4);
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
@ -116,7 +119,7 @@ export default function ContactFormPage() {
<Button variant='outlined'>
<ArrowLeft/>
</Button>
<Button variant='contained' sx={{padding: '10px 20px'}}>
<Button variant='contained' sx={{padding: '10px 20px'}} onClick={handleNext}>
Установка квиза
</Button>
</Box>

111
src/pages/Questions/QuestionPageCard.tsx
View File

@ -1,4 +1,14 @@
import {Box, Checkbox, FormControlLabel, IconButton, Paper, useTheme} from "@mui/material";
import {
Box,
Checkbox,
FormControl,
FormControlLabel,
IconButton,
InputAdornment,
Paper,
TextField,
useTheme
} from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
@ -13,6 +23,17 @@ import {questionStore} from "@root/questions";
import CopyIcon from "@icons/questionsPage/CopyIcon";
import CrossedEyeIcon from "@icons/CrossedEyeIcon";
import HideIcon from "@icons/questionsPage/hideIcon";
import Answer from "@icons/questionsPage/answer";
import OptionsPict from "@icons/questionsPage/options_pict";
import OptionsAndPict from "@icons/questionsPage/options_and_pict";
import Emoji from "@icons/questionsPage/emoji";
import Input from "@icons/questionsPage/input";
import DropDown from "@icons/questionsPage/drop_down";
import Date from "@icons/questionsPage/date";
import Slider from "@icons/questionsPage/slider";
import Download from "@icons/questionsPage/download";
import Page from "@icons/questionsPage/page";
import RatingIcon from "@icons/questionsPage/rating";
interface Props {
DeleteClick: () => void;
@ -33,6 +54,45 @@ export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) {
const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
const [isExpanded, setIsExpanded] = useState<boolean>(false);
const switchState = listQuestions[params][totalIndex].type
const IconAndrom = () => {
switch (switchState) {
case 'variant':
return (<Answer color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
break;
case 'images':
return (<OptionsPict color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
break
case 'varimg':
return (<OptionsAndPict color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
break;
case 'emoji':
return (<Emoji color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
break;
case 'text':
return (<Input color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
break;
case 'select':
return (<DropDown color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
break;
case 'date':
return (<Date color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
break;
case 'number':
return (<Slider color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
break;
case 'file':
return (<Download color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
break;
case 'page':
return (<Page color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
break;
case 'rating':
return (<RatingIcon color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
break;
default:
return (<></>)
}
}
return (
<Paper
draggable="true"
@ -49,12 +109,49 @@ export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) {
<Box
sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
>
<CustomTextField placeholder="Заголовок вопроса" text={""}
//sx={{"& .MuiInputBase-root": {backgroundColor: isExpanded ? theme.palette.background.default : "transparent"}}}
onChange={e => {updateQuestionsList(params, totalIndex, {title: e.target.value})
console.log(listQuestions[params][totalIndex].title)
}
}/>
<FormControl
fullWidth
variant="standard"
sx={{ p: 0 }}
>
<TextField
defaultValue={""}
fullWidth
placeholder={"Заголовок вопроса"}
onChange={e => {
updateQuestionsList(params, totalIndex, {title: e.target.value})
console.log(listQuestions[params][totalIndex].title)
}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
{IconAndrom()}
</InputAdornment>
),
}}
sx={{
"& .MuiInputBase-root": {
color: isExpanded ? "#9A9AAF" : "white",
backgroundColor: isExpanded ? theme.palette.background.default : "transparent",
height: "48px",
borderRadius: "10px",
},
}}
inputProps={{
sx: {
borderRadius: "10px",
fontSize: "18px",
lineHeight: "21px",
py: 0,
paddingLeft: switchState.length === 0 ? 0 : "18px"
}
}}
/>
</FormControl>
<IconButton onClick={() => setIsExpanded((prev) => !prev)}>
{" "}
{isExpanded ?

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

@ -10,7 +10,7 @@ import Slider from "../../assets/icons/questionsPage/slider";
import Download from "../../assets/icons/questionsPage/download";
import Page from "../../assets/icons/questionsPage/page";
import RatingIcon from "../../assets/icons/questionsPage/rating";
import {Box} from "@mui/material";
import {Box, useTheme} from "@mui/material";
import React from "react";
import {useParams} from "react-router-dom";
import {questionStore} from "@root/questions";
@ -20,62 +20,63 @@ interface Props {
}
export default function TypeQuestions({totalIndex }: Props) {
const theme = useTheme()
const params = Number(useParams().quizId);
const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
const switchState = listQuestions[params][totalIndex].type
const buttonTypeQuestions: { icon: JSX.Element; title: string; value: string }[] = [
{
icon: <Answer/>,
icon: <Answer color={theme.palette.grey2.main}/>,
title: 'Варианты ответов',
value: 'variant',
},
{
icon: <OptionsPict/>,
icon: <OptionsPict color={theme.palette.grey2.main}/>,
title: 'Варианты с картинками',
value: 'images',
},
{
icon: <OptionsAndPict/>,
icon: <OptionsAndPict color={theme.palette.grey2.main}/>,
title: 'Варианты и картинка',
value: 'varimg',
},
{
icon: <Emoji/>,
icon: <Emoji color={theme.palette.grey2.main}/>,
title: 'Эмоджи',
value: 'emoji',
},
{
icon: <Input/>,
icon: <Input color={theme.palette.grey2.main}/>,
title: 'Своё поле для ввода',
value: 'text',
},
{
icon: <DropDown/>,
icon: <DropDown color={theme.palette.grey2.main}/>,
title: 'Выпадающий список',
value: 'select',
},
{
icon: <Date/>,
icon: <Date color={theme.palette.grey2.main}/>,
title: 'Дата',
value: 'date',
},
{
icon: <Slider/>,
icon: <Slider color={theme.palette.grey2.main}/>,
title: 'Ползунок',
value: 'number',
},
{
icon: <Download/>,
icon: <Download color={theme.palette.grey2.main}/>,
title: 'Загрузка файла',
value: 'file',
},
{
icon: <Page/>,
icon: <Page color={theme.palette.grey2.main}/>,
title: 'Страница',
value: 'page',
},
{
icon: <RatingIcon/>,
icon: <RatingIcon color={theme.palette.grey2.main}/>,
title: 'Рейтинг',
value: 'rating',
},

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

@ -3,6 +3,11 @@ import React from "react";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import SwitchAnswerOptions from "./switchAnswerOptions";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import QuestionsPageCard from "../QuestionPageCard";
import {useParams} from "react-router-dom";
import {questionStore} from "@root/questions";
import {answerStore} from "@root/answer";
import CustomTextField from "@ui_kit/CustomTextField";
interface Props {
@ -11,6 +16,9 @@ interface Props {
export default function AnswerOptions({totalIndex}: Props) {
const params = Number(useParams().quizId);
const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
const {listAnswer, updateAnswerList, createAnswer, removeAnswer} = answerStore()
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
@ -36,9 +44,9 @@ export default function AnswerOptions({totalIndex}: Props) {
component="button"
variant="body2"
sx={{color: theme.palette.brightPurple.main}}
// onClick={() => {
// console.info("I'm a button.");
// }}
onClick={() => {
createAnswer(params, totalIndex)
}}
>
Добавьте ответ
</Link>
@ -52,6 +60,18 @@ export default function AnswerOptions({totalIndex}: Props) {
>или нажмите Enter</Typography>
<EnterIcon/>
</Box>
{/*{listAnswer.length === 0 ?*/}
{/*<></>*/}
{/* :*/}
{/* <Box>*/}
{/* {Object.values(listAnswer[params][totalIndex]).map((e, index) => (*/}
{/* <CustomTextField key={index} placeholder={'Добавьте ответ'} />*/}
{/* )*/}
{/* )}*/}
{/* </Box>*/}
{/*}*/}
</Box>
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
<SwitchAnswerOptions switchState={switchState}/>

11
src/pages/Result/Result.tsx
View File

@ -1,12 +1,18 @@
import { Link } from "react-router-dom";
import {Link, useParams} from "react-router-dom";
import {Box, Button, useTheme} from "@mui/material";
import CreationFullCard from "./CreationFullCard";
import Info from "../../assets/icons/Info";
import image from "../../assets/Rectangle 110.png";
import {quizStore} from "@root/quizes";
export const Result = () => {
const {listQuizes, updateQuizesList} = quizStore();
const params = Number(useParams().quizId);
const handleNext = () => {
updateQuizesList(params, {step: listQuizes[params].step + 1})
}
const theme = useTheme();
return (
<Box component="section">
@ -16,17 +22,16 @@ export const Result = () => {
image={image}
/>
<Box sx={{ mt: "30px", alignItems: "center" }}>
<Link to="/settings">
<Button
variant="contained"
sx={{
mr: "23px",
minWidth: "258px",
}}
onClick={handleNext}
>
Создать результаты
</Button>
</Link>
<Info />
</Box>

68
src/stores/answer.ts Normal file
View File

@ -0,0 +1,68 @@
import {create} from "zustand";
import {persist} from "zustand/middleware";
interface AnswerStore {
listAnswer: any;
updateAnswerList: (id: number, index: number, values: unknown) => void;
removeAnswer: any;
createAnswer: (id: number, indexQ: number) => void;
}
export const answerStore = create<AnswerStore>()(
persist(
(set, get) => ({
listAnswer: {
2537998: [
[{
variants:
[
""
],
own: true,
multi: true
}]
]
},
updateAnswerList: (id: number, index: number, values: any) => {
const array = get()["listAnswer"][id] || [];
array[index] = {
...array[index],
...values
};
const state = get()["listAnswer"] || {};
state[id] = array
set({listAnswer: state});
},
createAnswer:(id: number, indexQ: number) => {
const array = get()["listAnswer"][id][indexQ] || [];
array.push(
{
variants:
[
""
],
own: true,
multi: true
}
)
const state = get()["listAnswer"] || {};
state[id][indexQ] = array
set({listAnswer: state});
},
removeAnswer: (id:number, index: number) => {
const array = get()["listAnswer"][id] || [];
array.splice(index, 1)
const state = get()["listAnswer"] || {};
state[id] = array
set({listAnswer: state});
},
}),
{
name: "answer",
}
)
);

2
src/stores/questions.ts
View File

@ -1,7 +1,5 @@
import {create} from "zustand";
import {persist} from "zustand/middleware";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";
interface QuestionStore {
listQuestions: any;

13
src/ui_kit/switchStepPages.tsx
View File

@ -4,6 +4,9 @@ import Steptwo from "../pages/startPage/steptwo";
import StartPageSettings from "../pages/startPage/StartPageSettings";
import QuestionsPage from "../pages/Questions/QuestionsPage";
import ContactFormPage from "../pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "../pages/InstallQuiz/InstallQuiz";
import {Result} from "../pages/Result/Result";
import {Setting} from "../pages/Result/Setting";
interface Props {
activeStep: number,
@ -26,10 +29,16 @@ export default function SwitchStepPages({activeStep = 1, handleNext }: Props) {
return (<QuestionsPage/>);
break;
case 5:
return (<ContactFormPage/>);
return (<Result/>);
break;
case 6:
return (<StartPageSettings handleNext={handleNext}/>);
return (<Setting/>);
break;
case 7:
return (<ContactFormPage/>);
break;
case 8:
return (<InstallQuiz/>);
break;
default:
return (<></>)