правки по степперу(готов)

2023-03-04 02:54:19 +03:00 · 2023-03-04 02:54:19 +03:00 · 97f5e034ea
commit 97f5e034ea
parent 159dc011ef
8 changed files with 93 additions and 270 deletions
--- a/src/components/CreateQuiz/CreateQuiz.tsx
+++ b/src/components/CreateQuiz/CreateQuiz.tsx
@ -13,7 +13,7 @@ import PuzzlePieceIcon from "../icons/PuzzlePieceIcon";
 import GearIcon from "../icons/GearIcon";
 import LayoutIcon from "../icons/LayoutIcon";
 import CardWithImage from "./CardWithImage";
-import CreationCard from "../../ui_kit/CreationCard";
+import CreationCard from "@ui_kit/CreationCard";
 import quizCreationImage1 from "../../assets/quiz-creation-1.png";
 import quizCreationImage2 from "../../assets/quiz-creation-2.png";
 import cardImage1 from "../../assets/card-1.png";
@ -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 SidebarCreateQuize from "@ui_kit/sidebarCreateQuize";


 const createQuizMenuItems = [
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@ -1,6 +1,6 @@
 import NavbarCollapsed from "./NavbarCollapsed";
 import NavbarCreateQuiz from "./NavbarCreateQuiz";
-import Header from "../../ui_kit/Header";
+import Header from "@ui_kit/Header";


 interface Props {
--- 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 Header from '@ui_kit/Header';
+import Sidebar from '@ui_kit/sidebarCreateQuize';
 import Box from '@mui/material/Box';
 import {Outlet} from "react-router-dom";
 import {useTheme} from "@mui/material";
--- a/src/pages/startPage/StartPage.tsx
+++ b/src/pages/startPage/StartPage.tsx
@ -1,60 +1,24 @@
-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";
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import { Button, CardActionArea, CardActions } from '@mui/material';
-import CustomButton from "../../components/CustomButton";
 import Stepper from '@ui_kit/Stepper';
-import StartPageSettings from "./StartPageSettings";
-import StepOne from "./stepOne";
-// import React from "react";
+import SwitchStepPages from "./switchStepPages";
+import React from "react";


-// const [activeStep, setActiveStep] = React.useState(0);
-//
-// const handleNext = () => {
-//     setActiveStep((prevActiveStep) => prevActiveStep + 1);
-// };
-//
-// const handleBack = () => {
-//     setActiveStep((prevActiveStep) => prevActiveStep - 1);
-// };
-
 export default function StartPage() {
+
+    const [activeStep, setActiveStep] = React.useState(1);
+
+    const handleNext = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    };
+
+    const handleBack = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+
    return (
        <>
-            {/*Степпер*/}
-            <Stepper />
-            {/*первый шаг*/}
-            <StepOne/>
-            {/*второй шаг*/}
-            <Box sx={{
-                mt: "60px",
-            }}>
-                <Typography variant="h5">Стартовая страница</Typography>
-
-                <Box sx={{
-                    display: "flex",
-                    gap: "3.4%",
-                    mt: "40px",
-                }}>
-                    <Button variant='text'>
-                        <CardWithImage image={cardImage1} text="Standart" />
-                    </Button>
-                    <Button variant='text'>
-                        <CardWithImage image={cardImage2} text="Expanded" />
-                    </Button>
-                    <Button variant='text'>
-                        <CardWithImage image={cardImage3} text="Centered" />
-                    </Button>
-                </Box>
-            </Box>
-            {/*третий шаг*/}
-            <StartPageSettings/>
+            <Stepper activeStep={activeStep}/>
+          <SwitchStepPages activeStep={activeStep} handleNext={handleNext}/>
        </>
    )
 }
--- a/src/pages/startPage/stepOne.tsx
+++ b/src/pages/startPage/stepOne.tsx
@ -2,8 +2,12 @@ import {Box, Button, Typography, useTheme} from "@mui/material";
 import CreationCard from "@ui_kit/CreationCard";
 import quizCreationImage1 from "../../assets/quiz-creation-1.png";
 import quizCreationImage2 from "../../assets/quiz-creation-2.png";
-import { useState } from "react";
-export default function StepOne() {
+
+interface HandleNext {
+    handleNext: () => void
+}
+
+export default function StepOne({handleNext}:HandleNext) {
    const theme = useTheme();
    return (
        <>
@ -12,14 +16,18 @@ export default function StepOne() {
        gap: "3.4%",
        mt: "60px",
    }}>
-        <Button variant='text'>
+        <Button variant='text'
+                onClick={() => handleNext()}
+        >
            <CreationCard
                header="Создание квиз-опроса"
                text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
                image={quizCreationImage1}
            />
        </Button>
-        <Button variant='text'>
+        <Button variant='text'
+                onClick={() => handleNext()}
+        >
            <CreationCard
                header="Создание анкеты"
                text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
--- a/src/pages/startPage/steptwo.tsx
+++ b/src/pages/startPage/steptwo.tsx
@ -1,7 +1,41 @@
-import {Box} from "@mui/material";
+import {Box, Button, 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 Steptwo () {
+interface HandleNext {
+    handleNext: () => void
+}
+
+export default function Steptwo ({handleNext}:HandleNext) {
    return (
-        <Box></Box>
+        <Box sx={{
+            mt: "60px",
+        }}>
+            <Typography variant="h5">Стартовая страница</Typography>
+
+            <Box sx={{
+                display: "flex",
+                gap: "3.4%",
+                mt: "40px",
+            }}>
+                <Button variant='text'
+                        onClick={() => handleNext()}
+                >
+                    <CardWithImage image={cardImage1} text="Standart" />
+                </Button>
+                <Button variant='text'
+                            onClick={() => handleNext()}
+                >
+                    <CardWithImage image={cardImage2} text="Expanded" />
+                </Button>
+                <Button variant='text'
+                            onClick={() => handleNext()}
+                >
+                    <CardWithImage image={cardImage3} text="Centered" />
+                </Button>
+            </Box>
+        </Box>
    )
 }
--- a/src/pages/startPage/switchStepPages.tsx
+++ b/src/pages/startPage/switchStepPages.tsx
@ -3,18 +3,24 @@ import StepOne from "./stepOne";
 import Steptwo from "./steptwo";
 import StartPageSettings from "./StartPageSettings";

-const step = '1';
-export default function SwitchStepPages(step: any) {
+interface Props {
+    activeStep: number,
+    handleNext: () => void
+}

-    switch (step) {
-        case '1':
-            return (<StepOne/>);
+export default function SwitchStepPages({activeStep = 1, handleNext }: Props) {
+
+    switch (activeStep) {
+        case 1:
+            return (<StepOne handleNext={handleNext}/>);
            break;
-        case '2':
-            return (<Steptwo/>);
+        case 2:
+            return (<Steptwo handleNext={handleNext}/>);
            break
-        case '3':
+        case 3:
            return (<StartPageSettings/>);
            break;
+        default:
+            return (<></>)
    }
 }
--- a/src/ui_kit/Stepper.tsx
+++ b/src/ui_kit/Stepper.tsx
@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
 import MobileStepper from '@mui/material/MobileStepper';
 import {Box, Typography} from "@mui/material";
 interface Props {
@ -8,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
@ -20,7 +19,7 @@ export default function ProgressMobileStepper({desc = '', activeStep = 1, steps
              height: '51px',
              borderRadius: '13px',
              border: 'solid #7E2AEA 1px',
-              padding: '0 0 20px 20px',
+              padding: '0 0 20px 0',
              overflow: 'hidden'
          }}
      >
@ -32,6 +31,7 @@ export default function ProgressMobileStepper({desc = '', activeStep = 1, steps
              sx={{
                  width: '100%',
                  flexGrow: 1,
+                  paddingLeft: 0,
                  '& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress': {
                    height: '10px',
                    background: '#ffffff',
@ -44,201 +44,12 @@ export default function ProgressMobileStepper({desc = '', activeStep = 1, steps
              nextButton={<></>}
              backButton={<></>}
          />
-          <Typography> Шаг {activeStep} из 6</Typography>
-          <Typography>Настройка стартовой страницы</Typography>
+          <Box sx={{padding: '3px 3px 3px 20px'}}>
+              <Typography sx={{fontWeight:400,
+                  fontSize: '12px',
+                  lineHeight: '14.22px'}}> Шаг {activeStep} из {steps}</Typography>
+              {desc.length == 0 ? <></> : <Typography>{desc}</Typography>}
+          </Box>
    </Box>
  );
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// 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 StepOne from "./StepOne";
-// // import StartPage from "../pages/startPage/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<number>());
-//   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 = <StepOne/>
-//     break;
-//   // case 2:
-//   //   component = <StartPage/>
-//   //   break;
-//   default:
-//     break;
-// }
-//   return (<>
-//     <Container  maxWidth={false}
-//     disableGutters
-//     sx={{
-//       display:'flex',
-//         minHeight: "calc(100vh - 80px)",
-//     }}>
-//       {/*<SidebarCreateQuize/>*/}
-//       <Container
-//                 maxWidth="lg"
-//                 disableGutters
-//                 sx={{
-//                     p: "25px",
-//                     [theme.breakpoints.up("lg")]: {
-//                         maxWidth: "1210px",
-//                     }
-//                 }}
-//             >
-//      {component}
-//      </Container>
-//      </Container>
-//       {activeStep === steps.length ? (
-//         <React.Fragment>
-//           <Typography sx={{ mt: 2, mb: 1 }}>
-//             All steps completed - you&apos;re finished
-//           </Typography>
-//           <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
-//             <Box sx={{ flex: "1 1 auto" }} />
-//             <Button onClick={handleReset}>Reset</Button>
-//           </Box>
-//         </React.Fragment>
-//       ) : (
-//
-//         //Тут отображаемые компоненты
-//         <React.Fragment>
-//           <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
-//             <Button
-//               color="inherit"
-//               disabled={activeStep === 0}
-//               onClick={handleBack}
-//               sx={{ mr: 1 }}
-//             >
-//               Back
-//             </Button>
-//             <Box sx={{ flex: "1 1 auto" }} />
-//             {isStepOptional(activeStep) && (
-//               <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
-//                 Skip
-//               </Button>
-//             )}
-//             <Button onClick={handleNext}>
-//               {activeStep === steps.length - 1 ? "Finish" : "Next"}
-//             </Button>
-//           </Box>
-//         </React.Fragment>
-//       )}
-//
-//       <Stepper activeStep={activeStep}>
-//         {steps.map((label, index) => {
-//           const stepProps: { completed?: boolean } = {};
-//           const labelProps: {
-//             optional?: React.ReactNode;
-//           } = {};
-//           if (isStepOptional(index)) {
-//             labelProps.optional = (
-//               <Typography variant="caption">Optional</Typography>
-//             );
-//           }
-//           if (isStepSkipped(index)) {
-//             stepProps.completed = false;
-//           }
-//
-//           return (
-//             <Step key={label} {...stepProps}>
-//               <StepLabel {...labelProps}>{label}</StepLabel>
-//             </Step>
-//           );
-//         })}
-//       </Stepper>
-//       </>
-//   );
-// }
+}