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-05-10 14:40:39 +03:00
parent 837be801ea
commit cdb8c76c85
21 changed files with 158 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.tsx
View File

@ -1,11 +1,11 @@
import { CssBaseline } from "@mui/material";
import { styled } from "@mui/material/styles";
import CreateQuiz from "./components/CreateQuiz/CreateQuiz";
import FirstQuiz from "./pages/startPage/FirstQuiz";
import MyQuizzes from "./components/MyQuizzes";
import Navbar from "./components/Navbar/Navbar";
import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz";
import QuizGallery from "./components/QuizGallery";
import FirstQuiz from "./pages/createQuize/FirstQuiz";
import MyQuizzes from "./pages/createQuize/MyQuizzes";
import Navbar from "@ui_kit/Header/Navbar";
import NavbarCreateQuiz from "@ui_kit/Header/NavbarCreateQuiz";
import QuizGallery from "./pages/createQuize/QuizGallery";
import lightTheme from "./utils/themes/light";
import darkTheme from "./utils/themes/dark";

25
src/components/Button/BackButton.tsx
View File

@ -1,25 +0,0 @@
import { Button } from "@mui/material";
export default function BackButton() {
return (
<Button
sx={{
border: "1px solid #7E2AEA",
borderRadius: "8px",
width: "64px",
height: "44px",
}}
>
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.25 8H0.75" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M7.5 1.25L0.75 8L7.5 14.75"
stroke="#7E2AEA"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</Button>
);
}

20
src/index.tsx
View File

@ -6,22 +6,21 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
import lightTheme from "./utils/themes/light";
import { ThemeProvider } from '@mui/material';
import CreateQuiz from './components/CreateQuiz/CreateQuiz';
import NavbarCreateQuiz from './components/Navbar/NavbarCreateQuiz';
import NavbarCreateQuiz from '@ui_kit/Header/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"
import FirstQuiz from "./pages/startPage/FirstQuiz";
import FirstQuiz from "./pages/createQuize/FirstQuiz";
import QuestionsPage from "./pages/Questions/QuestionsPage";
import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
import {Result} from "./pages/Result/Result";
import { Setting } from "./pages/Result/Setting";
import MyQuizzes from "./pages/createQuize/MyQuizzes";
import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
@ -31,15 +30,18 @@ root.render(
<ThemeProvider theme={lightTheme}>
<BrowserRouter>
<Routes>
<Route path="/" element={ <Main /> }>
<Route path="/start" element={<FirstQuiz/>} />
<Route path="/" element={ <Main /> }/>
<Route path="/list" element={<FirstQuiz/>} />
<Route path="/list-empty" element={<FirstQuiz/>} />
<Route path="/list-full" element={<MyQuizzesFull/>} />
<Route path="/list-short" element={<MyQuizzes/>} />
<Route path="/create" element={<StartPage/>} />
<Route path="/questions" element={<QuestionsPage/>} />
<Route path='/contacts' element={<ContactFormPage/>} />
<Route path='/result' element={<Result/>} />
<Route path="/settings" element={<Setting />} />
<Route path='/install' element={<InstallQuiz/>} />
</Route>
</Routes>
</BrowserRouter>

1
src/pages/InstallQuiz/InstallQzOnSiteParent.tsx
View File

@ -7,7 +7,6 @@ import NumberThree from "@icons/NumberThree";
interface Props {
outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode;
sx?: SxProps<Theme>;
}
export default function InstallQzOnSiteParent ({outerContainerSx: sx, children}: Props) {

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

@ -1,11 +0,0 @@
import FirstQuiz from "../startPage/FirstQuiz";
import Navbar from "../../components/Navbar/Navbar";
export default function Create(){
return (
<>
<Navbar isLoggedIn={true} /><FirstQuiz/>
<></>
</>
)
}

2
src/pages/startPage/FirstQuiz.tsx → src/pages/createQuize/FirstQuiz.tsx
View File

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

9
src/pages/createQuize/Gallery.tsx
View File

@ -1,9 +0,0 @@
import Navbar from "../../components/Navbar/Navbar";
import QuizGallery from "../../components/QuizGallery";
export default function Gallery(){
return (
<><Navbar isLoggedIn={true} /><QuizGallery /></>
)
}

23
src/pages/createQuize/MyQuizzes.tsx Executable file
View File

@ -0,0 +1,23 @@
import {useTheme, Box,} from "@mui/material";
import ExpandableQuizBlock from "../../components/ExpandableQuizBlock";
import MyQuizzesFull from "./MyQuizzesFull";
export default function MyQuizzes() {
const theme = useTheme();
return (
<MyQuizzesFull>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "40px",
}}
>
<ExpandableQuizBlock name="Название" />
<ExpandableQuizBlock name="Название" />
</Box>
</MyQuizzesFull>
);
}

35
src/components/MyQuizzes.tsx → src/pages/createQuize/MyQuizzesFull.tsx Executable file → Normal file
View File

@ -1,11 +1,15 @@
import {Typography, useTheme, Box, Button} from "@mui/material";
import ComplexNavText from "./ComplexNavText";
import ExpandableQuizBlock from "./ExpandableQuizBlock";
import QuizCard from "./QuizCard";
import SectionWrapper from "./SectionWrapper";
import {Typography, useTheme, Box, Button, SxProps, Theme} from "@mui/material";
import ComplexNavText from "../../components/ComplexNavText";
import QuizCard from "../../components/QuizCard";
import SectionWrapper from "@ui_kit/SectionWrapper";
import React from "react";
interface Props {
outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode;
}
export default function MyQuizzes() {
export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
const theme = useTheme();
return (
@ -16,7 +20,7 @@ export default function MyQuizzes() {
mb: "70px",
}}
>
<ComplexNavText text1="Кабинет квизов" />
<ComplexNavText text1="Кабинет квизов"/>
<Box
sx={{
display: "flex",
@ -40,19 +44,10 @@ export default function MyQuizzes() {
mb: "60px",
}}
>
<QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0} />
<QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0} />
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "40px",
}}
>
<ExpandableQuizBlock name="Название" />
<ExpandableQuizBlock name="Название" />
<QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0}/>
<QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0}/>
</Box>
{children}
</SectionWrapper>
);
)
}

10
src/pages/createQuize/Projects.tsx
View File

@ -1,10 +0,0 @@
import MyQuizzes from "../../components/MyQuizzes";
import Navbar from "../../components/Navbar/Navbar";
export default function Projects() {
return (
<>
<Navbar isLoggedIn={true} /> <MyQuizzes />
</>
);
}

28
src/components/QuizGallery.tsx → src/pages/createQuize/QuizGallery.tsx
View File

@ -1,19 +1,19 @@
import { Box, FormControl, InputAdornment, InputLabel, MenuItem, Select, Tabs, TextField, Typography, useTheme } from "@mui/material";
import ComplexNavText from "./ComplexNavText";
import CustomButton from "./CustomButton";
import LayoutIconOld from "../assets/icons/LayoutIcon";
import SearchIcon from "../assets/icons/SearchIcon";
import SectionWrapper from "./SectionWrapper";
import ArrowDown from "../assets/icons/ArrowDownIcon";
import ComplexNavText from "../../components/ComplexNavText";
import CustomButton from "../../components/CustomButton";
import LayoutIconOld from "@icons/LayoutIcon";
import SearchIcon from "@icons/SearchIcon";
import SectionWrapper from "@ui_kit/SectionWrapper";
import ArrowDown from "@icons/ArrowDownIcon";
import { useState } from "react";
import { CustomTab } from "./CustomTab";
import QuizTemplateCard from "./QuizTemplateCard";
import quizTemplateImage1 from "../assets/quiz-template-1.png";
import quizTemplateImage2 from "../assets/quiz-template-2.png";
import quizTemplateImage3 from "../assets/quiz-template-3.png";
import quizTemplateImage4 from "../assets/quiz-template-4.png";
import quizTemplateImage5 from "../assets/quiz-template-5.png";
import quizTemplateImage6 from "../assets/quiz-template-6.png";
import { CustomTab } from "../../components/CustomTab";
import QuizTemplateCard from "../../components/QuizTemplateCard";
import quizTemplateImage1 from "../../assets/quiz-template-1.png";
import quizTemplateImage2 from "../../assets/quiz-template-2.png";
import quizTemplateImage3 from "../../assets/quiz-template-3.png";
import quizTemplateImage4 from "../../assets/quiz-template-4.png";
import quizTemplateImage5 from "../../assets/quiz-template-5.png";
import quizTemplateImage6 from "../../assets/quiz-template-6.png";
const categories = ["Категория 1", "Категория 2", "Категория 3", "Категория 4"] as const;

8
src/pages/createQuize/Quizes.tsx
View File

@ -1,8 +0,0 @@
import Navbar from "../../components/Navbar/Navbar";
export default function Quizes(){
return (
<><Navbar isLoggedIn={true} /></>
)
}

2
src/pages/main.tsx
View File

@ -1,4 +1,4 @@
import Header from '@ui_kit/Header';
import Header from '@ui_kit/Header/Header';
import Sidebar from '@ui_kit/Sidebar';
import Box from '@mui/material/Box';
import {Outlet} from "react-router-dom";

0
src/components/Navbar/Avatar.tsx → src/ui_kit/Header/Avatar.tsx
View File

12
src/ui_kit/Header.tsx → src/ui_kit/Header/Header.tsx
View File

@ -1,10 +1,10 @@
import { Box, Container, FormControl, IconButton, TextField, useTheme } from "@mui/material";
import CustomButton from "../components/CustomButton";
import BackArrowIcon from "../assets/icons/BackArrowIcon";
import EyeIcon from "../assets/icons/EyeIcon";
import CustomAvatar from "../components/Navbar/Avatar";
import NavMenuItem from "../components/NavMenuItem";
import PenaLogo from "./PenaLogo";
import CustomButton from "../../components/CustomButton";
import BackArrowIcon from "@icons/BackArrowIcon";
import EyeIcon from "@icons/EyeIcon";
import CustomAvatar from "./Avatar";
import NavMenuItem from "./NavMenuItem";
import PenaLogo from "../PenaLogo";
interface Props {
isLoggedIn: boolean;

71
src/ui_kit/Header/HeaderFull.tsx Normal file
View File

@ -0,0 +1,71 @@
import { Box, Container, IconButton, Typography, useTheme } from "@mui/material";
import LogoutIcon from "@icons/LogoutIcon";
import NavMenuItem from "./NavMenuItem";
import PenaLogo from "../PenaLogo";
import WalletIcon from "@icons/WalletIcon";
import CustomAvatar from "./Avatar";
export default function HeaderFull() {
const theme = useTheme();
return (
<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="Квизы" />
<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>
);
}

0
src/components/NavMenuItem.tsx → src/ui_kit/Header/NavMenuItem.tsx
View File

2
src/components/Navbar/Navbar.tsx → src/ui_kit/Header/Navbar.tsx
View File

@ -1,6 +1,6 @@
import NavbarCollapsed from "./NavbarCollapsed";
import NavbarCreateQuiz from "./NavbarCreateQuiz";
import Header from "@ui_kit/Header";
import Header from "@ui_kit/Header/Header";
interface Props {

0
src/components/Navbar/NavbarCollapsed.tsx → src/ui_kit/Header/NavbarCollapsed.tsx
View File

8
src/components/Navbar/NavbarCreateQuiz.tsx → src/ui_kit/Header/NavbarCreateQuiz.tsx
View File

@ -1,8 +1,8 @@
import { Box, Container, FormControl, IconButton, TextField, useTheme } from "@mui/material";
import CustomButton from "../CustomButton";
import BackArrowIcon from "../../assets/icons/BackArrowIcon";
import EyeIcon from "../../assets/icons/EyeIcon";
import NavMenuItem from "../NavMenuItem";
import CustomButton from "../../components/CustomButton";
import BackArrowIcon from "@icons/BackArrowIcon";
import EyeIcon from "@icons/EyeIcon";
import NavMenuItem from "./NavMenuItem";
import PenaLogo from "@ui_kit/PenaLogo";
import CustomAvatar from "./Avatar";

0
src/components/SectionWrapper.tsx → src/ui_kit/SectionWrapper.tsx
View File