diff --git a/src/App.tsx b/src/App.tsx index bb6e1192..fdeb61ff 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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"; diff --git a/src/components/CreateQuiz/CreateQuiz.tsx b/src/components/CreateQuiz/CreateQuiz.tsx index 992b3ed2..b8bf9397 100644 --- a/src/components/CreateQuiz/CreateQuiz.tsx +++ b/src/components/CreateQuiz/CreateQuiz.tsx @@ -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)", }} > - + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/OneIcon.tsx b/src/components/icons/questionsPage/OneIcon.tsx new file mode 100644 index 00000000..e864020f --- /dev/null +++ b/src/components/icons/questionsPage/OneIcon.tsx @@ -0,0 +1,26 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function OneIcon() { + + return ( + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/PointsIcon.tsx b/src/components/icons/questionsPage/PointsIcon.tsx new file mode 100644 index 00000000..da26e066 --- /dev/null +++ b/src/components/icons/questionsPage/PointsIcon.tsx @@ -0,0 +1,30 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function PointsIcon() { + + return ( + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/addPlus.tsx b/src/components/icons/questionsPage/addPlus.tsx new file mode 100644 index 00000000..b228a90c --- /dev/null +++ b/src/components/icons/questionsPage/addPlus.tsx @@ -0,0 +1,27 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function AddPlus() { + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/answer.tsx b/src/components/icons/questionsPage/answer.tsx new file mode 100644 index 00000000..bce1ef92 --- /dev/null +++ b/src/components/icons/questionsPage/answer.tsx @@ -0,0 +1,31 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function Answer() { + + return ( + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/arrowLeft.tsx b/src/components/icons/questionsPage/arrowLeft.tsx new file mode 100644 index 00000000..37754b7c --- /dev/null +++ b/src/components/icons/questionsPage/arrowLeft.tsx @@ -0,0 +1,25 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function ArrowLeft() { + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/branching.tsx b/src/components/icons/questionsPage/branching.tsx new file mode 100644 index 00000000..f8b9b6bd --- /dev/null +++ b/src/components/icons/questionsPage/branching.tsx @@ -0,0 +1,25 @@ +import { Box } from "@mui/material"; + + +export default function Branching() { + + return ( + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/clue.tsx b/src/components/icons/questionsPage/clue.tsx new file mode 100644 index 00000000..5fc1d1f1 --- /dev/null +++ b/src/components/icons/questionsPage/clue.tsx @@ -0,0 +1,23 @@ +import { Box } from "@mui/material"; + + +export default function Clue() { + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/date.tsx b/src/components/icons/questionsPage/date.tsx new file mode 100644 index 00000000..6121ed50 --- /dev/null +++ b/src/components/icons/questionsPage/date.tsx @@ -0,0 +1,38 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function Date() { + + return ( + + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/deleteIcon.tsx b/src/components/icons/questionsPage/deleteIcon.tsx new file mode 100644 index 00000000..b30baaf4 --- /dev/null +++ b/src/components/icons/questionsPage/deleteIcon.tsx @@ -0,0 +1,29 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function DeleteIcon() { + + return ( + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/download.tsx b/src/components/icons/questionsPage/download.tsx new file mode 100644 index 00000000..342c31dc --- /dev/null +++ b/src/components/icons/questionsPage/download.tsx @@ -0,0 +1,29 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function Download() { + + return ( + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/drop_down.tsx b/src/components/icons/questionsPage/drop_down.tsx new file mode 100644 index 00000000..a973a810 --- /dev/null +++ b/src/components/icons/questionsPage/drop_down.tsx @@ -0,0 +1,32 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function DropDown() { + + return ( + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/emoji.tsx b/src/components/icons/questionsPage/emoji.tsx new file mode 100644 index 00000000..60fba818 --- /dev/null +++ b/src/components/icons/questionsPage/emoji.tsx @@ -0,0 +1,28 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function Emoji() { + + return ( + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/hideIcon.tsx b/src/components/icons/questionsPage/hideIcon.tsx new file mode 100644 index 00000000..a8f1cfba --- /dev/null +++ b/src/components/icons/questionsPage/hideIcon.tsx @@ -0,0 +1,27 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function HideIcon() { + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/imgIcon.tsx b/src/components/icons/questionsPage/imgIcon.tsx new file mode 100644 index 00000000..ce38d120 --- /dev/null +++ b/src/components/icons/questionsPage/imgIcon.tsx @@ -0,0 +1,23 @@ +import { Box } from "@mui/material"; + + +export default function ImgIcon() { + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/input.tsx b/src/components/icons/questionsPage/input.tsx new file mode 100644 index 00000000..f93d388d --- /dev/null +++ b/src/components/icons/questionsPage/input.tsx @@ -0,0 +1,27 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function Input() { + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/options_and_pict.tsx b/src/components/icons/questionsPage/options_and_pict.tsx new file mode 100644 index 00000000..37a47cc4 --- /dev/null +++ b/src/components/icons/questionsPage/options_and_pict.tsx @@ -0,0 +1,32 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function optionsAndPict() { + + return ( + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/options_pict.tsx b/src/components/icons/questionsPage/options_pict.tsx new file mode 100644 index 00000000..2f7c89fc --- /dev/null +++ b/src/components/icons/questionsPage/options_pict.tsx @@ -0,0 +1,28 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function optionsPict() { + + return ( + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/page.tsx b/src/components/icons/questionsPage/page.tsx new file mode 100644 index 00000000..ac08c3f4 --- /dev/null +++ b/src/components/icons/questionsPage/page.tsx @@ -0,0 +1,31 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function Page() { + + return ( + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/rating.tsx b/src/components/icons/questionsPage/rating.tsx new file mode 100644 index 00000000..696f92c0 --- /dev/null +++ b/src/components/icons/questionsPage/rating.tsx @@ -0,0 +1,25 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function Rating() { + + return ( + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/settingIcon.tsx b/src/components/icons/questionsPage/settingIcon.tsx new file mode 100644 index 00000000..c14d5de4 --- /dev/null +++ b/src/components/icons/questionsPage/settingIcon.tsx @@ -0,0 +1,21 @@ +import { Box } from "@mui/material"; + + +export default function SettingIcon() { + + return ( + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/slider.tsx b/src/components/icons/questionsPage/slider.tsx new file mode 100644 index 00000000..cb942198 --- /dev/null +++ b/src/components/icons/questionsPage/slider.tsx @@ -0,0 +1,26 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function Slider() { + + return ( + + + + + + + ); +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 9226fc04..17844932 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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( }> - } /> - } /> + } /> + } /> + } /> diff --git a/src/pages/Questions/Questions.tsx b/src/pages/Questions/Questions.tsx new file mode 100644 index 00000000..f4291327 --- /dev/null +++ b/src/pages/Questions/Questions.tsx @@ -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: , title: 'Настройки'}, + {icon: , title: 'Подсказка'}, + {icon: , title: 'Ветвление'}, + {icon: , title: 'Изображение'}, + ] + const theme = useTheme(); + return ( + <> + + + + } + aria-controls="panel1a-content" + id="panel1a-header" + sx={{width: '100%'}} + > + + + + + + + + + + + } text={'Варианты ответов'}/> + } text={'Варианты с картинками'}/> + } text={'Варианты и картинка'}/> + } text={'Эможди'}/> + } text={'Своё поле для ввода'}/> + } text={'Выпадающий список'}/> + } text={'Дата'}/> + } text={'Ползунок'}/> + } text={'Загрузка файла'}/> + } text={'Страница'}/> + } text={'Рейтинг'}/> + + + + {buttonSetting.map( (e,i) => ( + {setCurrent(i)}} + sx={{backgroundColor: current === i ? theme.palette.brightPurple.main : 'transparent', + color: current === i ? '#ffffff' : theme.palette.grey3.main, + }} + > + {e.icon} + {e.title} + + ))} + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/createQuize/Create.tsx b/src/pages/createQuize/Create.tsx index e31a317e..bb1d6592 100644 --- a/src/pages/createQuize/Create.tsx +++ b/src/pages/createQuize/Create.tsx @@ -1,4 +1,4 @@ -import FirstQuiz from "../../components/FirstQuiz"; +import FirstQuiz from "../startPage/FirstQuiz"; import Navbar from "../../components/Navbar/Navbar"; export default function Create(){ diff --git a/src/pages/main.tsx b/src/pages/main.tsx index 12bff90c..1527ff36 100644 --- a/src/pages/main.tsx +++ b/src/pages/main.tsx @@ -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' }} > diff --git a/src/components/FirstQuiz.tsx b/src/pages/startPage/FirstQuiz.tsx similarity index 82% rename from src/components/FirstQuiz.tsx rename to src/pages/startPage/FirstQuiz.tsx index a451d05a..9100fd04 100644 --- a/src/components/FirstQuiz.tsx +++ b/src/pages/startPage/FirstQuiz.tsx @@ -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() { diff --git a/src/pages/startPage/StartPage.tsx b/src/pages/startPage/StartPage.tsx index 25bb195c..7e208cd7 100644 --- a/src/pages/startPage/StartPage.tsx +++ b/src/pages/startPage/StartPage.tsx @@ -17,7 +17,7 @@ export default function StartPage() { return ( <> - + ) diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index 5c35c904..2d1ee947 100644 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -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 ( - - - - ); -} \ No newline at end of file diff --git a/src/ui_kit/CustomTextField.tsx b/src/ui_kit/CustomTextField.tsx new file mode 100644 index 00000000..6cd7a929 --- /dev/null +++ b/src/ui_kit/CustomTextField.tsx @@ -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 ( + + + + ); +} \ No newline at end of file diff --git a/src/ui_kit/MiniButtonSetting.tsx b/src/ui_kit/MiniButtonSetting.tsx new file mode 100644 index 00000000..8cf46f66 --- /dev/null +++ b/src/ui_kit/MiniButtonSetting.tsx @@ -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)(props => ({ + fontWeight: 400, + fontSize: '14px', + lineHeight: '17px', + paddingTop: props.py || "6px", + paddingBottom: props.py || "6px", + borderRadius: "6px", + gap: '6px', + boxShadow: "none", +})); diff --git a/src/ui_kit/QuestionsMiniButton.tsx b/src/ui_kit/QuestionsMiniButton.tsx new file mode 100644 index 00000000..d306b50c --- /dev/null +++ b/src/ui_kit/QuestionsMiniButton.tsx @@ -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 ( + <> + + + ); +} \ No newline at end of file diff --git a/src/ui_kit/sidebarCreateQuize.tsx b/src/ui_kit/Sidebar.tsx similarity index 96% rename from src/ui_kit/sidebarCreateQuize.tsx rename to src/ui_kit/Sidebar.tsx index db08b4b6..9b436bee 100644 --- a/src/ui_kit/sidebarCreateQuize.tsx +++ b/src/ui_kit/Sidebar.tsx @@ -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(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", diff --git a/src/ui_kit/Stepper.tsx b/src/ui_kit/Stepper.tsx index f728dbd0..3c70577b 100644 --- a/src/ui_kit/Stepper.tsx +++ b/src/ui_kit/Stepper.tsx @@ -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 ( Шаг {activeStep} из {steps} - {desc.length == 0 ? <> : {desc}} + {desc} );