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-02 01:59:51 +03:00
parent 5933d6f418
commit 6cd5f65fd5
22 changed files with 36984 additions and 6985 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.idea/.gitignore vendored Normal file
View File

@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml
# Editor-based HTTP Client requests
/httpRequests/

6
.idea/inspectionProfiles/Project_Default.xml Normal file
View File

@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

8
.idea/modules.xml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/squiz.iml" filepath="$PROJECT_DIR$/.idea/squiz.iml" />
</modules>
</component>
</project>

8
.idea/squiz.iml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/vcs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

29717
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

9
src/App.tsx
View File

@ -6,7 +6,8 @@ import MyQuizzes from "./components/MyQuizzes";
import Navbar from "./components/Navbar/Navbar";
import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz";
import QuizGallery from "./components/QuizGallery";
import lightTheme from "./utils/themes/light";
// import lightTheme from "./utils/themes/light";
// import darkTheme from "./utils/themes/dark";
const Divider = styled("div")(() => ({
height: "30px",
@ -16,7 +17,7 @@ const Divider = styled("div")(() => ({
function App() {
return (
<ThemeProvider theme={lightTheme}>
<>
<CssBaseline />
<Navbar isLoggedIn={true} />
<FirstQuiz />
@ -27,10 +28,10 @@ function App() {
<QuizGallery />
<Divider />
<NavbarCreateQuiz />
<CreateQuiz />
</ThemeProvider>
</>
);
}

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

@ -1,6 +1,6 @@
import NavbarCollapsed from "./NavbarCollapsed";
import NavbarCreateQuiz from "./NavbarCreateQuiz";
import NavbarFull from "./NavbarFull";
import Header from "../../ui_kit/Header";
interface Props {
@ -17,5 +17,5 @@ export default function Navbar({ isLoggedIn, isCollapsed = false, mode = "defaul
mode === "createQuiz" ?
<NavbarCreateQuiz />
:
<NavbarFull isLoggedIn={isLoggedIn} />;
<Header isLoggedIn={true} />;
}

117
src/components/Navbar/NavbarFull.tsx
View File

@ -1,117 +0,0 @@
import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";
import LogoutIcon from "../icons/LogoutIcon";
import NavMenuItem from "../NavMenuItem";
import PenaLogo from "../PenaLogo";
import SectionWrapper from "../SectionWrapper";
import WalletIcon from "../icons/WalletIcon";
import CustomAvatar from "./Avatar";
interface Props {
isLoggedIn: boolean;
}
export default function NavbarFull({ isLoggedIn }: Props) {
const theme = useTheme();
return isLoggedIn ? (
<Container
component="nav"
disableGutters
maxWidth={false}
sx={{
px: "16px",
display: "flex",
height: "80px",
alignItems: "center",
gap: "60px",
bgcolor: "white",
borderBottom: "1px solid #E3E3E3",
}}
>
<PenaLogo width={124} />
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
}}
>
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" isActive />
<NavMenuItem text="Меню 3" />
<NavMenuItem text="Меню 4" />
<NavMenuItem text="Меню 5" />
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" />
</Box>
<Box
sx={{
display: "flex",
ml: "auto",
}}
>
<IconButton sx={{ p: 0 }}>
<WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
</IconButton>
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
<Typography
sx={{
fontSize: "12px",
lineHeight: "14px",
color: theme.palette.grey3.main,
}}
>Мой баланс</Typography>
<Typography variant="body2" color={theme.palette.brightPurple.main}>00.00 руб.</Typography>
</Box>
<CustomAvatar sx={{ ml: "27px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
<IconButton
sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}
>
<LogoutIcon />
</IconButton>
</Box>
</Container>
) : (
<SectionWrapper
component="nav"
maxWidth="lg"
outerContainerSx={{
backgroundColor: theme.palette.lightPurple.main,
// borderBottom: "1px solid #E3E3E3",
}}
sx={{
px: "20px",
display: "flex",
justifyContent: "space-between",
height: "80px",
alignItems: "center",
}}
>
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
}}
>
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" isActive />
<NavMenuItem text="Меню 3" />
<NavMenuItem text="Меню 4" />
<NavMenuItem text="Меню 5" />
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" />
</Box>
<Button
variant="outlined"
sx={{
px: "18px",
py: "10px",
borderColor: "white",
borderRadius: "8px"
}}
>Личный кабинет</Button>
</SectionWrapper>
);
}

27
src/index.tsx
View File

@ -7,13 +7,15 @@ import lightTheme from "./utils/themes/light";
import { ThemeProvider } from '@mui/material';
import CreateQuiz from './components/CreateQuiz/CreateQuiz';
import NavbarCreateQuiz from './components/Navbar/NavbarCreateQuiz';
import darkTheme from "./utils/themes/dark";
import HorizontalLinearStepper from './ui_kit/Stepper';
import Create from './pages/createQuize/Create';
import Quizes from './pages/createQuize/Quizes';
import Projects from './pages/createQuize/Projects';
import Gallery from './pages/createQuize/Gallery';
import StartPage from "./pages/startPage/StartPage";
import Main from "./pages/main"
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
@ -23,18 +25,23 @@ root.render(
<ThemeProvider theme={lightTheme}>
<BrowserRouter>
<Routes>
<Route path="/" element={ <App /> } />
<Route path="/create" element={<Create/>} />
<Route path="/quizes" element={<Quizes/>}/>
<Route path="/projects" element={<Projects/>} />
<Route path="/gallery" element={<Gallery/>} />
<Route path="/create/quiz" element={<><NavbarCreateQuiz /></>} />
<Route path="/create/start" element={<><NavbarCreateQuiz /></>} />
<Route path="/create/settings" element={<><NavbarCreateQuiz /><CreateQuiz /></>} />
<Route path="/create/stepper" element={<><NavbarCreateQuiz /><HorizontalLinearStepper/></>} />
<Route path="/" element={ <Main /> }>
<Route path="/create" element={<Create/>} />
<Route path="/start" element={<StartPage/>} />
</Route>
</Routes>
</BrowserRouter>
</ThemeProvider>
</React.StrictMode>
);
// <Route path="/quizes" element={<Quizes/>}/>
// <Route path="/projects" element={<Projects/>} />
// <Route path="/gallery" element={<Gallery/>} />
// <Route path="/create/quiz" element={<><NavbarCreateQuiz /></>} />
// <Route path="/create/start" element={<><NavbarCreateQuiz /></>} />
// <Route path="/create/settings" element={<><NavbarCreateQuiz /><CreateQuiz /></>} />
// <Route path="/create/stepper" element={<><NavbarCreateQuiz /><HorizontalLinearStepper/></>} />

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

@ -3,6 +3,9 @@ import Navbar from "../../components/Navbar/Navbar";
export default function Create(){
return (
<><Navbar isLoggedIn={true} /><FirstQuiz/></>
<>
<Navbar isLoggedIn={true} /><FirstQuiz/>
<></>
</>
)
}

30
src/pages/main.tsx Normal file
View File

@ -0,0 +1,30 @@
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";
export default function Main () {
const theme = useTheme();
return (
<>
<Header isLoggedIn={true}/>
<Box sx={{
display: 'flex'
}}
>
<Sidebar />
<Box
sx={{
background: theme.palette.background.default,
width: '100%',
padding: '25px'
}}
>
<Outlet />
</Box>
</Box>
</>
)
}

48
src/pages/startPage/StartPage.tsx Normal file
View File

@ -0,0 +1,48 @@
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 "../../components/CreateQuiz/StartPageSettings";
import CreateCard from "../../ui_kit/CreateCard";
export default function StartPage() {
return (
<>
{/*Степпер*/}
<Stepper />
{/*первый шаг*/}
<CreateCard/>
{/*второй шаг*/}
<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/>
</>
)
}

7
src/pages/startPage/stepone.tsx Normal file
View File

@ -0,0 +1,7 @@
import {Box} from "@mui/material";
export default function Stepone () {
return (
<Box></Box>
)
}

7
src/pages/startPage/steptwo.tsx Normal file
View File

@ -0,0 +1,7 @@
import {Box} from "@mui/material";
export default function Steptwo () {
return (
<Box></Box>
)
}

78
src/ui_kit/CreateCard.tsx
View File

@ -1,75 +1,31 @@
import { Box, Typography, useTheme } from "@mui/material";
import {Box, Button, 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<number>(1 / 6);
return (<>
<Box
sx={{
border: `1px solid ${theme.palette.brightPurple.main}`,
borderRadius: "12px",
overflow: "hidden",
px: "20px",
pt: "20px",
pb: "10px",
position: "relative",
}}
>
<Box
sx={{
backgroundColor: "white",
height: "10px",
position: "absolute",
top: 0,
left: 0,
width: "100%",
boxShadow: `0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
}}
/>
<Box
sx={{
backgroundColor: theme.palette.brightPurple.main,
height: "10px",
position: "absolute",
top: 0,
left: 0,
width: `${(progress * 100).toFixed(3)}%`,
}}
/>
<Typography
sx={{
fontSize: "12px",
lineHeight: "14px",
color: "#4D4D4D",
}}
>Шаг 1 из 6</Typography>
<Typography
sx={{
fontSize: "18px",
lineHeight: "24px",
color: "#4D4D4D",
mt: "5px",
}}
>Настройка стартовой страницы</Typography>
</Box>
return (
<>
<Box sx={{
display: "flex",
gap: "3.4%",
mt: "60px",
}}>
<CreationCard
header="Создание квиз-опроса"
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
image={quizCreationImage1}
/>
<CreationCard
header="Создание анкеты"
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
image={quizCreationImage2}
/>
<Button variant='text'>
<CreationCard
header="Создание квиз-опроса"
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
image={quizCreationImage1}
/>
</Button>
<Button variant='text'>
<CreationCard
header="Создание анкеты"
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
image={quizCreationImage2}
/>
</Button>
</Box>
</>
)

129
src/ui_kit/Header.tsx Normal file
View File

@ -0,0 +1,129 @@
import { Box, Container, FormControl, IconButton, TextField, useTheme } from "@mui/material";
import CustomButton from "../components/CustomButton";
import BackArrowIcon from "../components/icons/BackArrowIcon";
import EyeIcon from "../components/icons/EyeIcon";
import CustomAvatar from "../components/Navbar/Avatar";
import NavMenuItem from "../components/NavMenuItem";
import PenaLogo from "../components/PenaLogo";
interface Props {
isLoggedIn: boolean;
}
export default function Header({ isLoggedIn }: Props) {
const theme = useTheme();
return (
<Container
component="nav"
maxWidth={false}
disableGutters
sx={{
px: "16px",
display: "flex",
height: "80px",
alignItems: "center",
bgcolor: "white",
borderBottom: "1px solid #E3E3E3",
zIndex: theme.zIndex.drawer + 1,
}}
>
<PenaLogo width={124} />
<Box
sx={{
display: "flex",
alignItems: "center",
ml: "37px",
}}
>
<IconButton sx={{ p: "6px" }}>
<BackArrowIcon />
</IconButton>
<FormControl
fullWidth
variant="standard"
>
<TextField
fullWidth
id="project-name"
placeholder="Название проекта окно"
sx={{
width: "270px",
"& .MuiInputBase-root": {
height: "34px",
borderRadius: "8px",
p: 0,
},
}}
inputProps={{
sx: {
height: "20px",
borderRadius: "8px",
fontSize: "16px",
lineHeight: "20px",
p: "7px",
color: "black",
"&::placeholder": {
opacity: 1,
},
}
}}
/>
</FormControl>
</Box>
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
ml: "20px",
}}
>
<NavMenuItem text="Редактировать" isActive />
<NavMenuItem text="Заявки" />
<NavMenuItem text="Аналитика" />
<NavMenuItem text="История" />
<NavMenuItem text="Помощь" />
</Box>
<Box
sx={{
display: "flex",
ml: "auto",
gap: "15px",
}}
>
<CustomButton
variant="outlined"
startIcon={<EyeIcon />}
sx={{
color: theme.palette.brightPurple.main,
borderColor: theme.palette.brightPurple.main,
fontSize: "14px",
lineHeight: "18px",
px: "14px",
py: "8px",
width: "auto",
height: "34px",
"& .MuiButton-startIcon": {
mr: "3px",
}
}}
>Предпросмотр</CustomButton>
<CustomButton
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
borderColor: theme.palette.brightPurple.main,
fontSize: "14px",
lineHeight: "18px",
px: "17px",
py: "8px",
width: "auto",
height: "34px",
}}
>Опубликовать</CustomButton>
<CustomAvatar sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
</Box>
</Container>
);
}

25
src/ui_kit/StartPage.tsx
View File

@ -1,25 +0,0 @@
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 (
<>
<Box sx={{
mt: "60px",
}}>
<Typography variant="h5">Стартовая страница</Typography>
<Box sx={{
display: "flex",
gap: "3.4%",
mt: "40px",
}}>
<CardWithImage image={cardImage1} text="Standart" />
<CardWithImage image={cardImage2} text="Expanded" />
<CardWithImage image={cardImage3} text="Centered" />
</Box>
</Box>
</>
)
}

401
src/ui_kit/Stepper.tsx
View File

@ -1,159 +1,268 @@
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";
import * as React from 'react';
import { useTheme } from '@mui/material/styles';
import MobileStepper from '@mui/material/MobileStepper';
import Button from '@mui/material/Button';
import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
import {Box, Typography} from "@mui/material";
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>());
export default function ProgressMobileStepper() {
const theme = useTheme();
const isStepOptional = (step: number) => {
return step === 1;
};
const isStepSkipped = (step: number) => {
return skipped.has(step);
};
const [activeStep, setActiveStep] = React.useState(1);
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 = <CreateCard/>
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>
</>
return (
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
height: '51px',
borderRadius: '13px',
border: 'solid #7E2AEA 1px',
padding: '0 0 20px 20px',
overflow: 'hidden'
}}
>
<MobileStepper
variant="progress"
steps={6}
position="static"
activeStep={activeStep}
sx={{
width: '100%',
flexGrow: 1,
'& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress': {
height: '10px',
background: '#ffffff',
width: '100%'
},
'& .css-1v0msyf-MuiLinearProgress-bar1': {
background: '#7e2aea',
},
}}
nextButton={
<Button size="small" onClick={handleNext} disabled={activeStep === 5} sx={{display: 'none'}}>
{theme.direction === 'rtl' ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</Button>
}
backButton={
<Button size="small" onClick={handleBack} disabled={activeStep === 0} sx={{display: 'none'}}>
{theme.direction === 'rtl' ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
</Button>
}
/>
<Typography> Шаг 1 из 6</Typography>
<Typography>Настройка стартовой страницы</Typography>
</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 CreateCard from "./CreateCard";
// // 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 = <CreateCard/>
// 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>
// </>
// );
// }

2
src/ui_kit/sidebarCreateQuize.tsx
View File

@ -14,7 +14,6 @@ import GearIcon from "../components/icons/GearIcon";
import LayoutIcon from "../components/icons/LayoutIcon";
import MenuItem from "../components/CreateQuiz/MenuItem";
const createQuizMenuItems = [
[LayoutIcon, "Стартовая страница"],
[QuestionIcon, "Вопросы"],
@ -45,6 +44,7 @@ export default function SidebarCreateQuize() {
backgroundColor: theme.palette.lightPurple.main,
minWidth: isMenuCollapsed ? "80px" : "230px",
width: isMenuCollapsed ? "80px" : "230px",
height: '100vh',
display: "flex",
flexDirection: "column",
py: "19px",

9
src/utils/themes/dark.ts
View File

@ -31,6 +31,15 @@ const darkTheme = createTheme({
grey1: {
main: "#434657",
},
grey2: {
main: "#9A9AAF",
},
grey3: {
main: "#4D4D4D",
},
orange: {
main: "#FB5607",
},
navbarbg: {
main: "#333647",
},

13318
yarn.lock
View File

File diff suppressed because it is too large Load Diff