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-10 04:38:31 +03:00
parent 97f5e034ea
commit 453a5e5168
36 changed files with 875 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -1,7 +1,7 @@
import { CssBaseline, ThemeProvider } from "@mui/material";
import { styled } from "@mui/material/styles";
import CreateQuiz from "./components/CreateQuiz/CreateQuiz";
import FirstQuiz from "./components/FirstQuiz";
import FirstQuiz from "./pages/startPage/FirstQuiz";
import MyQuizzes from "./components/MyQuizzes";
import Navbar from "./components/Navbar/Navbar";
import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz";

4
src/components/CreateQuiz/CreateQuiz.tsx
View File

@ -21,7 +21,7 @@ import cardImage2 from "../../assets/card-2.png";
import cardImage3 from "../../assets/card-3.png";
import StartPageSettings from "../../pages/startPage/StartPageSettings";
import CustomButton from "../CustomButton";
import SidebarCreateQuize from "@ui_kit/sidebarCreateQuize";
import Sidebar from "@ui_kit/Sidebar";
const createQuizMenuItems = [
@ -57,7 +57,7 @@ export default function CreateQuiz() {
minHeight: "calc(100vh - 80px)",
}}
>
<SidebarCreateQuize></SidebarCreateQuize>
<Sidebar></Sidebar>
<Container
maxWidth="lg"
disableGutters

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

@ -0,0 +1,26 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function CopyIcon() {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.75 15.75H20.25V3.75H8.25V8.25" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.75 8.25H3.75V20.25H15.75V8.25Z" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,26 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function OneIcon() {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" rx="15" fill="#EEE4FC"/>
<path d="M15.864 19.5C15.7707 19.5 15.6913 19.472 15.626 19.416C15.57 19.3507 15.542 19.2713 15.542 19.178V11.338L13.218 13.13C13.1433 13.186 13.064 13.2093 12.98 13.2C12.896 13.1907 12.826 13.1487 12.77 13.074L12.406 12.612C12.35 12.528 12.3267 12.444 12.336 12.36C12.3547 12.276 12.4013 12.206 12.476 12.15L15.528 9.798C15.5933 9.75133 15.654 9.72333 15.71 9.714C15.766 9.70467 15.8267 9.7 15.892 9.7H16.606C16.6993 9.7 16.774 9.73267 16.83 9.798C16.886 9.854 16.914 9.92867 16.914 10.022V19.178C16.914 19.2713 16.886 19.3507 16.83 19.416C16.774 19.472 16.6993 19.5 16.606 19.5H15.864Z" fill="#7E2AEA"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,30 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function PointsIcon() {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 8C11.3284 8 12 7.32843 12 6.5C12 5.67157 11.3284 5 10.5 5C9.67157 5 9 5.67157 9 6.5C9 7.32843 9.67157 8 10.5 8Z" fill="#4D4D4D"/>
<path d="M19.5 8C20.3284 8 21 7.32843 21 6.5C21 5.67157 20.3284 5 19.5 5C18.6716 5 18 5.67157 18 6.5C18 7.32843 18.6716 8 19.5 8Z" fill="#4D4D4D"/>
<path d="M10.5 16.5C11.3284 16.5 12 15.8284 12 15C12 14.1716 11.3284 13.5 10.5 13.5C9.67157 13.5 9 14.1716 9 15C9 15.8284 9.67157 16.5 10.5 16.5Z" fill="#4D4D4D"/>
<path d="M19.5 16.5C20.3284 16.5 21 15.8284 21 15C21 14.1716 20.3284 13.5 19.5 13.5C18.6716 13.5 18 14.1716 18 15C18 15.8284 18.6716 16.5 19.5 16.5Z" fill="#4D4D4D"/>
<path d="M10.5 25C11.3284 25 12 24.3284 12 23.5C12 22.6716 11.3284 22 10.5 22C9.67157 22 9 22.6716 9 23.5C9 24.3284 9.67157 25 10.5 25Z" fill="#4D4D4D"/>
<path d="M19.5 25C20.3284 25 21 24.3284 21 23.5C21 22.6716 20.3284 22 19.5 22C18.6716 22 18 22.6716 18 23.5C18 24.3284 18.6716 25 19.5 25Z" fill="#4D4D4D"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function AddPlus() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="22" cy="22" r="22" fill="#FB5607"/>
<path d="M22 10V34" stroke="white" stroke-width="2"/>
<path d="M10 22H34" stroke="white" stroke-width="2"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,31 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function Answer() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,25 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function ArrowLeft() {
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.75 12H4.25" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 5.25L4.25 12L11 18.75" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,25 @@
import { Box } from "@mui/material";
export default function Branching() {
return (
<Box
sx={{
// height: "38px",
// width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

23
src/components/icons/questionsPage/clue.tsx Normal file
View File

@ -0,0 +1,23 @@
import { Box } from "@mui/material";
export default function Clue() {
return (
<Box
sx={{
// height: "38px",
// width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

38
src/components/icons/questionsPage/date.tsx Normal file
View File

@ -0,0 +1,38 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function Date() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,29 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function DeleteIcon() {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.25 5.25H3.75" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.75 9.75V15.75" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.25 9.75V15.75" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.75 5.25V19.5C18.75 19.6989 18.671 19.8897 18.5303 20.0303C18.3897 20.171 18.1989 20.25 18 20.25H6C5.80109 20.25 5.61032 20.171 5.46967 20.0303C5.32902 19.8897 5.25 19.6989 5.25 19.5V5.25" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.75 5.25V3.75C15.75 3.35218 15.592 2.97064 15.3107 2.68934C15.0294 2.40804 14.6478 2.25 14.25 2.25H9.75C9.35218 2.25 8.97064 2.40804 8.68934 2.68934C8.40804 2.97064 8.25 3.35218 8.25 3.75V5.25" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,29 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function Download() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,32 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function DropDown() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

28
src/components/icons/questionsPage/emoji.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function Emoji() {
return (
<Box
sx={{
height: "38px",
width: "45px",
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 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"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function HideIcon() {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.7218 18.4322C13.8897 18.6339 12.9835 18.75 12 18.75C4.5 18.75 1.5 12 1.5 12C1.5 12 4.5 5.25 12 5.25C19.5 5.25 22.5 12 22.5 12C22.5 12 21.7941 14.0139 19 16" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 16L19.5 20L15 16" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

23
src/components/icons/questionsPage/imgIcon.tsx Normal file
View File

@ -0,0 +1,23 @@
import { Box } from "@mui/material";
export default function ImgIcon() {
return (
<Box
sx={{
// height: "38px",
// width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,27 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function Input() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,32 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function optionsAndPict() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

28
src/components/icons/questionsPage/options_pict.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function optionsPict() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,31 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function Page() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,25 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function Rating() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

21
src/components/icons/questionsPage/settingIcon.tsx Normal file
View File

@ -0,0 +1,21 @@
import { Box } from "@mui/material";
export default function SettingIcon() {
return (
<Box
sx={{
// height: "38px",
// width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

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

@ -0,0 +1,26 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function Slider() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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"/>
</svg>
</Box>
);
}

7
src/index.tsx
View File

@ -16,6 +16,8 @@ import Projects from './pages/createQuize/Projects';
import Gallery from './pages/createQuize/Gallery';
import StartPage from "./pages/startPage/StartPage";
import Main from "./pages/main"
import FirstQuiz from "./pages/startPage/FirstQuiz";
import Questions from "./pages/Questions/Questions";
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
@ -26,8 +28,9 @@ root.render(
<BrowserRouter>
<Routes>
<Route path="/" element={ <Main /> }>
<Route path="/create" element={<Create/>} />
<Route path="/start" element={<StartPage/>} />
<Route path="/start" element={<FirstQuiz/>} />
<Route path="/create" element={<StartPage/>} />
<Route path="/questions" element={<Questions/>} />
</Route>
</Routes>

147
src/pages/Questions/Questions.tsx Normal file
View File

@ -0,0 +1,147 @@
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, useTheme} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import CustomTextField from "@ui_kit/CustomTextField";
import Answer from "../../components/icons/questionsPage/answer";
import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
import OptionsPict from "../../components/icons/questionsPage/options_pict";
import OptionsAndPict from "../../components/icons/questionsPage/options_and_pict";
import Emoji from "../../components/icons/questionsPage/emoji";
import Input from "../../components/icons/questionsPage/input";
import DropDown from "../../components/icons/questionsPage/drop_down";
import Date from "../../components/icons/questionsPage/date";
import Slider from "../../components/icons/questionsPage/slider";
import Download from "../../components/icons/questionsPage/download";
import Page from "../../components/icons/questionsPage/page";
import RatingIcon from "../../components/icons/questionsPage/rating";
import OneIcon from "../../components/icons/questionsPage/OneIcon";
import PointsIcon from "../../components/icons/questionsPage/PointsIcon";
import CustomButton from "../../components/CustomButton";
import Clue from "../../components/icons/questionsPage/clue";
import Branching from "../../components/icons/questionsPage/branching";
import ImgIcon from "../../components/icons/questionsPage/imgIcon";
import SettingIcon from "../../components/icons/questionsPage/settingIcon";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import HideIcon from "../../components/icons/questionsPage/hideIcon";
import CopyIcon from "../../components/icons/questionsPage/CopyIcon";
import DeleteIcon from "../../components/icons/questionsPage/deleteIcon";
import AddPlus from "../../components/icons/questionsPage/addPlus";
import ArrowLeft from "../../components/icons/questionsPage/arrowLeft";
export default function Questions() {
const [activeStep, setActiveStep] = React.useState(1);
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const [current, setCurrent] = React.useState(1)
const buttonSetting: {icon: JSX.Element; title: string} [] =[
{icon: <SettingIcon/>, title: 'Настройки'},
{icon: <Clue/>, title: 'Подсказка'},
{icon: <Branching/>, title: 'Ветвление'},
{icon: <ImgIcon/>, title: 'Изображение'},
]
const theme = useTheme();
return (
<>
<Stepper activeStep={activeStep} desc={"Задайте вопросы"}/>
<Accordion sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0'}}>
<Box sx={{display: 'flex', width: '100%'}}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
sx={{width: '100%'}}
>
<CustomTextField placeholder="Заголовок вопроса" text={""}/>
</AccordionSummary>
<Box sx={{display: 'flex', alignItems: 'center', gap: '10px', paddingRight: '20px'}}>
<OneIcon/>
<PointsIcon/>
</Box>
</Box>
<AccordionDetails sx={{display: 'flex', flexDirection: 'column', padding: 0, borderRadius: '12px'}}>
<Box sx={{display: 'flex', flexWrap: 'wrap', gap: '20px', padding: '8px 20px 20px'}}>
<QuestionsMiniButton icon={<Answer/>} text={'Варианты ответов'}/>
<QuestionsMiniButton icon={<OptionsPict/>} text={'Варианты с картинками'}/>
<QuestionsMiniButton icon={<OptionsAndPict/>} text={'Варианты и картинка'}/>
<QuestionsMiniButton icon={<Emoji/>} text={'Эможди'}/>
<QuestionsMiniButton icon={<Input/>} text={'Своё поле для ввода'}/>
<QuestionsMiniButton icon={<DropDown/>} text={'Выпадающий список'}/>
<QuestionsMiniButton icon={<Date/>} text={'Дата'}/>
<QuestionsMiniButton icon={<Slider/>} text={'Ползунок'}/>
<QuestionsMiniButton icon={<Download/>} text={'Загрузка файла'}/>
<QuestionsMiniButton icon={<Page/>} text={'Страница'}/>
<QuestionsMiniButton icon={<RatingIcon/>} text={'Рейтинг'}/>
</Box>
<Box sx={{
display: 'flex',
justifyContent: 'space-between',
width: '100%',
background: '#f2f3f7'
}}>
<Box
sx={{
padding: '20px',
display: 'flex',
gap: '10px'
}}
>
{buttonSetting.map( (e,i) => (
<MiniButtonSetting
key={i}
onClick={()=>{setCurrent(i)}}
sx={{backgroundColor: current === i ? theme.palette.brightPurple.main : 'transparent',
color: current === i ? '#ffffff' : theme.palette.grey3.main,
}}
>
{e.icon}
{e.title}
</MiniButtonSetting>
))}
</Box>
<Box
sx={{
padding: '20px',
}}
>
<IconButton sx={{borderRadius: '6px', padding: '2px'}}>
<HideIcon/>
</IconButton>
<IconButton sx={{borderRadius: '6px', padding: '2px'}}>
<CopyIcon/>
</IconButton>
<IconButton sx={{borderRadius: '6px', padding: '2px'}}>
<DeleteIcon/>
</IconButton>
</Box>
</Box>
</AccordionDetails>
</Accordion>
<Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>
<IconButton>
<AddPlus/>
</IconButton>
<Box sx={{display: 'flex', gap: '8px'}}>
<Button variant='outlined' sx={{padding: '10px 20px', borderRadius: '8px'}}>
<ArrowLeft/>
</Button>
<Button variant='contained' sx={{padding: '10px 20px', borderRadius: '8px', background: theme.palette.brightPurple.main, fontSize: '18px'}}>Следующий шаг</Button>
</Box>
</Box>
</>
)
}

2
src/pages/createQuize/Create.tsx
View File

@ -1,4 +1,4 @@
import FirstQuiz from "../../components/FirstQuiz";
import FirstQuiz from "../startPage/FirstQuiz";
import Navbar from "../../components/Navbar/Navbar";
export default function Create(){

5
src/pages/main.tsx
View File

@ -1,5 +1,5 @@
import Header from '@ui_kit/Header';
import Sidebar from '@ui_kit/sidebarCreateQuize';
import Sidebar from '@ui_kit/Sidebar';
import Box from '@mui/material/Box';
import {Outlet} from "react-router-dom";
import {useTheme} from "@mui/material";
@ -19,7 +19,8 @@ export default function Main () {
sx={{
background: theme.palette.background.default,
width: '100%',
padding: '25px'
padding: '25px',
height: '100vh'
}}
>
<Outlet />

6
src/components/FirstQuiz.tsx → src/pages/startPage/FirstQuiz.tsx
View File

@ -1,7 +1,7 @@
import { Typography, useTheme } from "@mui/material";
import ComplexNavText from "./ComplexNavText";
import CustomButton from "./CustomButton";
import SectionWrapper from "./SectionWrapper";
import ComplexNavText from "../../components/ComplexNavText";
import CustomButton from "../../components/CustomButton";
import SectionWrapper from "../../components/SectionWrapper";
export default function FirstQuiz() {

2
src/pages/startPage/StartPage.tsx
View File

@ -17,7 +17,7 @@ export default function StartPage() {
return (
<>
<Stepper activeStep={activeStep}/>
<Stepper activeStep={activeStep} desc={"Настройка стартовой страницы"}/>
<SwitchStepPages activeStep={activeStep} handleNext={handleNext}/>
</>
)

40
src/pages/startPage/StartPageSettings.tsx
View File

@ -1,4 +1,4 @@
import { Box, FormControl, Link, MenuItem, Select, TextField, Typography, useTheme } from "@mui/material";
import { Box, FormControl, Link, MenuItem, Select, Typography, useTheme } from "@mui/material";
import { useState } from "react";
import CustomCheckbox from "../../components/CustomCheckbox";
import AlignLeftIcon from "../../components/icons/AlignLeftIcon";
@ -13,6 +13,7 @@ import UploadIcon from "../../components/icons/UploadIcon";
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
import SelectableIconButton from "../../components/CreateQuiz/SelectableIconButton";
import UploadBox from "../../components/CreateQuiz/UploadBox";
import CustomTextField from "@ui_kit/CustomTextField";
const designTypes = [
@ -272,40 +273,3 @@ export default function StartPageSettings() {
);
}
interface CustomTextFieldProps {
placeholder: string;
text: string;
}
function CustomTextField({ placeholder, text }: CustomTextFieldProps) {
const theme = useTheme();
return (
<FormControl
fullWidth
variant="standard"
sx={{ p: 0 }}
>
<TextField
// value={text}
fullWidth
placeholder={placeholder}
sx={{
backgroundColor: theme.palette.background.default,
"& .MuiInputBase-root": {
height: "48px",
borderRadius: "10px",
}
}}
inputProps={{
sx: {
borderRadius: "10px",
fontSize: "18px",
lineHeight: "21px",
py: 0,
}
}}
/>
</FormControl>
);
}

39
src/ui_kit/CustomTextField.tsx Normal file
View File

@ -0,0 +1,39 @@
import {FormControl, TextField, useTheme} from "@mui/material";
interface CustomTextFieldProps {
placeholder: string;
text: string;
}
export default function CustomTextField({ placeholder, text }: CustomTextFieldProps) {
const theme = useTheme();
return (
<FormControl
fullWidth
variant="standard"
sx={{ p: 0 }}
>
<TextField
// value={text}
fullWidth
placeholder={placeholder}
sx={{
backgroundColor: theme.palette.background.default,
"& .MuiInputBase-root": {
height: "48px",
borderRadius: "10px",
}
}}
inputProps={{
sx: {
borderRadius: "10px",
fontSize: "18px",
lineHeight: "21px",
py: 0,
}
}}
/>
</FormControl>
);
}

18
src/ui_kit/MiniButtonSetting.tsx Normal file
View File

@ -0,0 +1,18 @@
import { Button, styled } from "@mui/material";
import * as React from 'react';
import { ButtonProps } from "@mui/material/Button";
interface Props {
py?: string;
}
export default styled(Button)<ButtonProps & Props>(props => ({
fontWeight: 400,
fontSize: '14px',
lineHeight: '17px',
paddingTop: props.py || "6px",
paddingBottom: props.py || "6px",
borderRadius: "6px",
gap: '6px',
boxShadow: "none",
}));

40
src/ui_kit/QuestionsMiniButton.tsx Normal file
View File

@ -0,0 +1,40 @@
import {Button, Typography, useTheme} from "@mui/material";
import Answer from "../components/icons/questionsPage/answer";
import React from "react";
import { ReactNode } from "react";
interface QuestionsMiniButtonProps {
icon: ReactNode;
text: string;
}
export default function QuestionsMiniButton({ icon, text }: QuestionsMiniButtonProps) {
const theme = useTheme();
return (
<>
<Button variant="outlined"
sx={{
padding: '26px 15px 15px 15px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
width: '174px',
height: '140px',
border: '1px solid #9A9AAF',
borderRadius: '8px'
}}
>
{icon}
<Typography
sx={{
textAlign: 'left',
fontWeight: 400,
fontSize: '16px',
lineHeight: '18.4px',
color: theme.palette.grey2.main
}}>{text}</Typography>
</Button>
</>
);
}

4
src/ui_kit/sidebarCreateQuize.tsx → src/ui_kit/Sidebar.tsx
View File

@ -30,7 +30,7 @@ const quizSettingsMenuItems = [
[GearIcon, "Настройки"],
] as const;
export default function SidebarCreateQuize() {
export default function Sidebar() {
const theme = useTheme();
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
const [activeMenuItemIndex, setActiveMenuItemIndex] = useState<number>(0);
@ -44,7 +44,7 @@ export default function SidebarCreateQuize() {
backgroundColor: theme.palette.lightPurple.main,
minWidth: isMenuCollapsed ? "80px" : "230px",
width: isMenuCollapsed ? "80px" : "230px",
height: '100vh',
// height: '100vh',
display: "flex",
flexDirection: "column",
py: "19px",

4
src/ui_kit/Stepper.tsx
View File

@ -7,7 +7,7 @@ interface Props {
steps?: number;
}
export default function ProgressMobileStepper({desc = 'Настройка стартовой страницы', activeStep = 1, steps = 6}:Props) {
export default function ProgressMobileStepper({desc, activeStep = 1, steps = 6}:Props) {
return (
<Box
@ -48,7 +48,7 @@ export default function ProgressMobileStepper({desc = 'Настройка ста
<Typography sx={{fontWeight:400,
fontSize: '12px',
lineHeight: '14.22px'}}> Шаг {activeStep} из {steps}</Typography>
{desc.length == 0 ? <></> : <Typography>{desc}</Typography>}
<Typography>{desc}</Typography>
</Box>
</Box>
);