diff --git a/src/components/CreateQuiz/CreateQuiz.tsx b/src/components/CreateQuiz/CreateQuiz.tsx index d200491d..4060b8bb 100644 --- a/src/components/CreateQuiz/CreateQuiz.tsx +++ b/src/components/CreateQuiz/CreateQuiz.tsx @@ -21,6 +21,7 @@ import cardImage2 from "../../assets/card-2.png"; import cardImage3 from "../../assets/card-3.png"; import StartPageSettings from "./StartPageSettings"; import CustomButton from "../CustomButton"; +import SidebarCreateQuize from "../../ui_kit/sidebarCreateQuize"; const createQuizMenuItems = [ @@ -56,112 +57,7 @@ export default function CreateQuiz() { minHeight: "calc(100vh - 80px)", }} > - - - {!isMenuCollapsed && - Создание квиза - } - - - - - - {createQuizMenuItems.map((menuItem, index) => { - const Icon = menuItem[0]; - return ( - setActiveMenuItemIndex(index)} - key={menuItem[1]} - text={menuItem[1]} - isCollapsed={isMenuCollapsed} - isActive={activeMenuItemIndex === index} - icon={} - /> - ); - })} - - {!isMenuCollapsed && - Настройки квиза - } - - {quizSettingsMenuItems.map((menuItem, index) => { - const Icon = menuItem[0]; - const totalIndex = index + createQuizMenuItems.length; - const isActive = activeMenuItemIndex === totalIndex; - return ( - setActiveMenuItemIndex(totalIndex)} - key={menuItem[1]} - text={menuItem[1]} - isActive={isActive} - isCollapsed={isMenuCollapsed} - icon={} - /> - ); - })} - - + } /> - } /> - }/> - } /> - } /> - } /> + } /> + }/> + } /> + } /> + } /> } /> } /> + } /> + diff --git a/src/pages/createQuize/Create.tsx b/src/pages/createQuize/Create.tsx new file mode 100644 index 00000000..e3ea1f5c --- /dev/null +++ b/src/pages/createQuize/Create.tsx @@ -0,0 +1,8 @@ +import FirstQuiz from "../../components/FirstQuiz"; +import Navbar from "../../components/Navbar/Navbar"; + +export default function Create(){ + return ( +<> + ) +} \ No newline at end of file diff --git a/src/pages/createQuize/Gallery.tsx b/src/pages/createQuize/Gallery.tsx new file mode 100644 index 00000000..7106aed5 --- /dev/null +++ b/src/pages/createQuize/Gallery.tsx @@ -0,0 +1,9 @@ + +import Navbar from "../../components/Navbar/Navbar"; +import QuizGallery from "../../components/QuizGallery"; + +export default function Gallery(){ + return ( +<> + ) +} \ No newline at end of file diff --git a/src/pages/createQuize/Projects.tsx b/src/pages/createQuize/Projects.tsx new file mode 100644 index 00000000..9679d2a8 --- /dev/null +++ b/src/pages/createQuize/Projects.tsx @@ -0,0 +1,10 @@ +import MyQuizzes from "../../components/MyQuizzes"; +import Navbar from "../../components/Navbar/Navbar"; + +export default function Projects() { + return ( + <> + + + ); +} diff --git a/src/pages/createQuize/Quizes.tsx b/src/pages/createQuize/Quizes.tsx new file mode 100644 index 00000000..d8cead72 --- /dev/null +++ b/src/pages/createQuize/Quizes.tsx @@ -0,0 +1,8 @@ + +import Navbar from "../../components/Navbar/Navbar"; + +export default function Quizes(){ + return ( +<> + ) +} \ No newline at end of file diff --git a/src/ui_kit/CreateCard.tsx b/src/ui_kit/CreateCard.tsx new file mode 100644 index 00000000..fd59e80e --- /dev/null +++ b/src/ui_kit/CreateCard.tsx @@ -0,0 +1,76 @@ +import { Box, Typography, useTheme } from "@mui/material"; +import CreationCard from "../components/CreateQuiz/CreationCard"; +import quizCreationImage1 from "../assets/quiz-creation-1.png"; +import quizCreationImage2 from "../assets/quiz-creation-2.png"; +import { useState } from "react"; +export default function CreateCard() { + const theme = useTheme(); + const [progress, setProgress] = useState(1 / 6); + return (<> + + + + Шаг 1 из 6 + Настройка стартовой страницы + + + + + + + ) +} \ No newline at end of file diff --git a/src/ui_kit/StartPage.tsx b/src/ui_kit/StartPage.tsx new file mode 100644 index 00000000..68a5e82e --- /dev/null +++ b/src/ui_kit/StartPage.tsx @@ -0,0 +1,25 @@ +import { Box, Typography } from "@mui/material"; +import CardWithImage from "../components/CreateQuiz/CardWithImage"; +import cardImage1 from "../assets/card-1.png"; +import cardImage2 from "../assets/card-2.png"; +import cardImage3 from "../assets/card-3.png"; +export default function StartPage() { + return ( + <> + + Стартовая страница + + + + + + + + ) +} \ No newline at end of file diff --git a/src/ui_kit/Stepper.tsx b/src/ui_kit/Stepper.tsx new file mode 100644 index 00000000..6670b280 --- /dev/null +++ b/src/ui_kit/Stepper.tsx @@ -0,0 +1,159 @@ +import * as React from "react"; +import Box from "@mui/material/Box"; +import Stepper from "@mui/material/Stepper"; +import Step from "@mui/material/Step"; +import StepLabel from "@mui/material/StepLabel"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; +import Navbar from "../components/Navbar/Navbar"; +import Create from "../pages/createQuize/Create"; +import { Container, useTheme } from "@mui/material"; +import Projects from "../pages/createQuize/Projects"; +import MyQuizzes from "../components/MyQuizzes"; +import SidebarCreateQuize from "./sidebarCreateQuize"; +import CreateCard from "./CreateCard"; +import StartPage from "./StartPage"; + +const steps = ["Step 34", "Step 2", "Step 3"]; + +export default function HorizontalLinearStepper() { + const [activeStep, setActiveStep] = React.useState(0); + const [skipped, setSkipped] = React.useState(new Set()); + const theme = useTheme(); + const isStepOptional = (step: number) => { + return step === 1; + }; + + const isStepSkipped = (step: number) => { + return skipped.has(step); + }; + + const handleNext = () => { + let newSkipped = skipped; + if (isStepSkipped(activeStep)) { + newSkipped = new Set(newSkipped.values()); + newSkipped.delete(activeStep); + } + + setActiveStep((prevActiveStep) => prevActiveStep + 1); + setSkipped(newSkipped); + }; + + const handleBack = () => { + setActiveStep((prevActiveStep) => prevActiveStep - 1); + }; + + const handleSkip = () => { + if (!isStepOptional(activeStep)) { + // You probably want to guard against something like this, + // it should never occur unless someone's actively trying to break something. + throw new Error("You can't skip a step that isn't optional."); + } + + setActiveStep((prevActiveStep) => prevActiveStep + 1); + setSkipped((prevSkipped) => { + const newSkipped = new Set(prevSkipped.values()); + newSkipped.add(activeStep); + return newSkipped; + }); + }; + + const handleReset = () => { + setActiveStep(0); + }; + let component = null + switch (activeStep) { + case 0: + component = <> + break; + case 1: + component = + break; + case 2: + component = + break; + default: + break; +} + return (<> + + + + {component} + + + {activeStep === steps.length ? ( + + + All steps completed - you're finished + + + + + + + ) : ( + + //Тут отображаемые компоненты + + + + + {isStepOptional(activeStep) && ( + + )} + + + + )} + + + {steps.map((label, index) => { + const stepProps: { completed?: boolean } = {}; + const labelProps: { + optional?: React.ReactNode; + } = {}; + if (isStepOptional(index)) { + labelProps.optional = ( + Optional + ); + } + if (isStepSkipped(index)) { + stepProps.completed = false; + } + + return ( + + {label} + + ); + })} + + + ); +} diff --git a/src/ui_kit/sidebarCreateQuize.tsx b/src/ui_kit/sidebarCreateQuize.tsx new file mode 100644 index 00000000..663ef685 --- /dev/null +++ b/src/ui_kit/sidebarCreateQuize.tsx @@ -0,0 +1,151 @@ +import { useState } from "react"; +import { Container, Box, useTheme, List, Typography, IconButton } from "@mui/material"; + +import MegaphoneIcon from "../components/icons/MegaphoneIcon"; +import QuestionIcon from "../components/icons/QuestionIcon"; +import ChartPieIcon from "../components/icons/ChartPieIcon"; +import ContactBookIcon from "../components/icons/ContactBookIcon"; +import FlowArrowIcon from "../components/icons/FlowArrowIcon"; +import CollapseMenuIcon from "../components/icons/CollapseMenuIcon"; +import TagIcon from "../components/icons/TagIcon"; +import PencilCircleIcon from "../components/icons/PencilCircleIcon"; +import PuzzlePieceIcon from "../components/icons/PuzzlePieceIcon"; +import GearIcon from "../components/icons/GearIcon"; +import LayoutIcon from "../components/icons/LayoutIcon"; +import MenuItem from "../components/CreateQuiz/MenuItem"; + + +const createQuizMenuItems = [ + [LayoutIcon, "Стартовая страница"], + [QuestionIcon, "Вопросы"], + [ChartPieIcon, "Результаты"], + [ContactBookIcon, "Форма контактов"], + [FlowArrowIcon, "Установка квиза"], + [MegaphoneIcon, "Запуск рекламы"], +] as const; + +const quizSettingsMenuItems = [ + [TagIcon, "Дополнения"], + [PencilCircleIcon, "Дизайн"], + [PuzzlePieceIcon, "Интеграции"], + [GearIcon, "Настройки"], +] as const; + +export default function SidebarCreateQuize() { + const theme = useTheme(); + const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); + const [activeMenuItemIndex, setActiveMenuItemIndex] = useState(0); + const [progress, setProgress] = useState(1 / 6); + + const handleMenuCollapseToggle = () => setIsMenuCollapsed(prev => !prev); + return ( + + + + {!isMenuCollapsed && + Создание квиза + } + + + + + + {createQuizMenuItems.map((menuItem, index) => { + const Icon = menuItem[0]; + return ( + setActiveMenuItemIndex(index)} + key={menuItem[1]} + text={menuItem[1]} + isCollapsed={isMenuCollapsed} + isActive={activeMenuItemIndex === index} + icon={} + /> + ); + })} + + {!isMenuCollapsed && + Настройки квиза + } + + {quizSettingsMenuItems.map((menuItem, index) => { + const Icon = menuItem[0]; + const totalIndex = index + createQuizMenuItems.length; + const isActive = activeMenuItemIndex === totalIndex; + return ( + setActiveMenuItemIndex(totalIndex)} + key={menuItem[1]} + text={menuItem[1]} + isActive={isActive} + isCollapsed={isMenuCollapsed} + icon={} + /> + ); + })} + + + + ) +} \ No newline at end of file