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 20:35:30 +03:00
parent 00bb68671b
commit ba26c6f5a1
50 changed files with 155 additions and 771 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/App.tsx
View File

@ -1,37 +0,0 @@
import { CssBaseline } from "@mui/material";
import { styled } from "@mui/material/styles";
import CreateQuiz from "./components/CreateQuiz/CreateQuiz";
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";
const Divider = styled("div")(() => ({
height: "30px",
backgroundColor: "black",
}));
function App() {
return (
<>
<CssBaseline />
<Navbar isLoggedIn={true} />
<FirstQuiz />
<Divider />
<MyQuizzes />
<Divider />
<QuizGallery />
<Divider />
<NavbarCreateQuiz />
<CreateQuiz />
</>
);
}
export default App;

31
src/components/ComplexHeader.tsx
View File

@ -1,31 +0,0 @@
import { SxProps, Theme, Typography, useTheme } from "@mui/material";
interface Props {
text1: string;
text2?: string;
sx?: SxProps<Theme>;
}
export default function ComplexHeader({ text1, text2, sx }: Props) {
const theme = useTheme();
return (
<Typography variant="h4" sx={sx}>
{text1}
{text2 &&
<Typography
component="span"
sx={{
fontWeight: "inherit",
fontSize: "inherit",
lineHeight: "inherit",
color: theme.palette.brightPurple.main,
}}
>
{text2}
</Typography>
}
</Typography>
);
}

186
src/components/CreateQuiz/CreateQuiz.tsx
View File

@ -1,186 +0,0 @@
import { useState } from "react";
import { Container, Box, useTheme, List, Typography, IconButton } from "@mui/material";
import MenuItem from "./MenuItem";
import MegaphoneIcon from "../../assets/icons/MegaphoneIcon";
import QuestionIcon from "../../assets/icons/QuestionIcon";
import ChartPieIcon from "../../assets/icons/ChartPieIcon";
import ContactBookIcon from "../../assets/icons/ContactBookIcon";
import FlowArrowIcon from "../../assets/icons/FlowArrowIcon";
import CollapseMenuIcon from "../../assets/icons/CollapseMenuIcon";
import TagIcon from "../../assets/icons/TagIcon";
import PencilCircleIcon from "../../assets/icons/PencilCircleIcon";
import PuzzlePieceIcon from "../../assets/icons/PuzzlePieceIcon";
import GearIcon from "../../assets/icons/GearIcon";
import LayoutIcon from "../../assets/icons/LayoutIcon";
import CardWithImage from "./CardWithImage";
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";
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 Sidebar from "@ui_kit/Sidebar";
const createQuizMenuItems = [
[LayoutIcon, "Стартовая страница"],
[QuestionIcon, "Вопросы"],
[ChartPieIcon, "Результаты"],
[ContactBookIcon, "Форма контактов"],
[FlowArrowIcon, "Установка квиза"],
[MegaphoneIcon, "Запуск рекламы"],
] as const;
const quizSettingsMenuItems = [
[TagIcon, "Дополнения"],
[PencilCircleIcon, "Дизайн"],
[PuzzlePieceIcon, "Интеграции"],
[GearIcon, "Настройки"],
] as const;
export default function CreateQuiz() {
const theme = useTheme();
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
const [activeMenuItemIndex, setActiveMenuItemIndex] = useState<number>(0);
const [progress, setProgress] = useState<number>(1 / 6);
const handleMenuCollapseToggle = () => setIsMenuCollapsed(prev => !prev);
return (
<Container
maxWidth={false}
disableGutters
sx={{
display: "flex",
minHeight: "calc(100vh - 80px)",
}}
>
<Sidebar></Sidebar>
<Container
maxWidth="lg"
disableGutters
sx={{
p: "25px",
[theme.breakpoints.up("lg")]: {
maxWidth: "1210px",
}
}}
>
<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>
<Box sx={{
display: "flex",
gap: "3.4%",
mt: "60px",
}}>
<CreationCard
header="Создание квиз-опроса"
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
image={quizCreationImage1}
/>
<CreationCard
header="Создание анкеты"
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
image={quizCreationImage2}
/>
</Box>
<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>
<Box sx={{
mt: "60px",
}}>
<Typography variant="h5" mb="40px">Стартовая страница</Typography>
<StartPageSettings />
<Box sx={{
mt: "30px",
width: "100%",
display: "flex",
gap: "20px",
}}>
<CustomButton
variant="outlined"
sx={{
border: `1px solid ${theme.palette.brightPurple.main}`,
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>Отключить стартовую страницу</CustomButton>
<CustomButton
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Настроить вопросы</CustomButton>
</Box>
</Box>
</Container>
</Container>
);
}

15
src/components/CustomButton.tsx
View File

@ -1,15 +0,0 @@
import { Button, styled } from "@mui/material";
import { ButtonProps } from "@mui/material/Button";
interface Props {
py?: string;
}
export default styled(Button)<ButtonProps & Props>(props => ({
width: "180px",
paddingTop: props.py || "10px",
paddingBottom: props.py || "10px",
borderRadius: "8px",
boxShadow: "none",
}));

19
src/index.tsx
View File

@ -1,14 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
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 '@ui_kit/Header/NavbarCreateQuiz';
import darkTheme from "./utils/themes/dark";
import HorizontalLinearStepper from './ui_kit/Stepper';
import StartPage from "./pages/startPage/StartPage";
@ -27,7 +22,6 @@ const root = ReactDOM.createRoot(
);
const routeslink: {path: string; page: JSX.Element; header: boolean; sidebar: boolean} [] = [
{path: "/", page: <Main/>, header: false, sidebar: false},
{path: "/list", page: <FirstQuiz/>, header: false, sidebar: false},
{path: "/list-empty", page: <FirstQuiz/>, header: false, sidebar: false},
{path: "/list-full", page: <MyQuizzesFull/>, header: false, sidebar: false},
@ -48,19 +42,6 @@ root.render(
{routeslink.map((e,i) =>(
<Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar}/>} />
))}
{/*<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/>} />*/}
</Routes>
</BrowserRouter>
</ThemeProvider>

28
src/pages/ContactFormPage/BranchingForm.tsx
View File

@ -2,16 +2,13 @@ import {
Box,
Button,
FormControl, FormControlLabel, Link,
MenuItem,
Modal, Radio, RadioGroup,
Select,
SelectChangeEvent,
Typography,
useTheme
} from "@mui/material";
import * as React from "react";
import CustomButton from "../../components/CustomButton";
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
import SelectableButton from "@ui_kit/SelectableButton";
import {useState} from "react";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
@ -127,28 +124,13 @@ export default function BranchingForm() {
</Box>
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
<CustomButton
<Button
variant="outlined"
onClick={handleClose}
sx={{
border: `1px solid ${theme.palette.brightPurple.main}`,
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>Отмена</CustomButton>
<CustomButton
>Отмена</Button>
<Button
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Готово</CustomButton>
>Готово</Button>
</Box>
</Box>
</Box>

2
src/pages/ContactFormPage/Massengers/WindowMessengers.tsx
View File

@ -5,7 +5,7 @@ import {Typography, useTheme} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import CustomTextField from "@ui_kit/CustomTextField";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import SelectableButton from "../../../components/CreateQuiz/SelectableButton";
import SelectableButton from "@ui_kit/SelectableButton";
import {useState} from "react";
import SelectMask from "../SelectMask";

13
src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
View File

@ -1,14 +1,11 @@
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react";
import SettingIcon from "../../../assets/icons/questionsPage/settingIcon";
import Branching from "../../../assets/icons/questionsPage/branching";
import {Box, IconButton, useTheme} from "@mui/material";
import SupplementIcon from "../../../assets/icons/ContactFormIcon/supplementIcon";
import NameIcon from "../../../assets/icons/ContactFormIcon/NameIcon";
import EmailIcon from "../../../assets/icons/ContactFormIcon/EmailIcon";
import PhoneIcon from "../../../assets/icons/ContactFormIcon/PhoneIcon";
import TextIcon from "../../../assets/icons/ContactFormIcon/TextIcon";
import AddressIcon from "../../../assets/icons/ContactFormIcon/AddressIcon";
import NameIcon from "@icons/ContactFormIcon/NameIcon";
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
import TextIcon from "@icons/ContactFormIcon/TextIcon";
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
interface Props {
switchState: string

1
src/pages/ContactFormPage/NewField/WindowNewField.tsx
View File

@ -5,7 +5,6 @@ import {Typography, useTheme} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import ButtonsNewField from "./ButtonsNewField";
import SwitchNewField from "./SwitchNewField";
import {useState} from "react";
export default function WindowNewField() {

2
src/pages/ContactFormPage/SelectMask.tsx
View File

@ -1,5 +1,5 @@
import {Box, Link, Typography, useTheme} from "@mui/material";
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
import SelectableButton from "@ui_kit/SelectableButton";
import CustomTextField from "@ui_kit/CustomTextField";
import * as React from "react";
import {useState} from "react";

53
src/pages/InstallQuiz/ButtonSocial.tsx
View File

@ -15,8 +15,7 @@ import TelegramIcon from "../../assets/icons/telegramIcon";
import QRIcon from "../../assets/icons/qrIcon";
import React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import CustomButton from "../../components/CustomButton";
import UploadBox from "../../components/CreateQuiz/UploadBox";
import UploadBox from "@ui_kit/UploadBox";
import UploadIcon from "../../assets/icons/UploadIcon";
import CopyIcon from "../../assets/icons/CopyIcon";
import Qr from "../../assets/Qr.png"
@ -125,28 +124,13 @@ export default function ButtonSocial () {
<UploadBox sx ={{maxWidth: "325px"}} icon={<UploadIcon />} text="5 MB максимум" />
</Box>
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
<CustomButton
<Button
variant="outlined"
onClick={handleCloseGraph}
sx={{
border: `1px solid ${theme.palette.brightPurple.main}`,
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>Отмена</CustomButton>
<CustomButton
>Отмена</Button>
<Button
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Готово</CustomButton>
>Готово</Button>
</Box>
</Box>
</Box>
@ -244,28 +228,13 @@ export default function ButtonSocial () {
</Box>
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
<CustomButton
<Button
variant="outlined"
onClick={handleCloseTiktok}
sx={{
border: `1px solid ${theme.palette.brightPurple.main}`,
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>Отмена</CustomButton>
<CustomButton
>Отмена</Button>
<Button
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Готово</CustomButton>
>Готово</Button>
</Box>
</Box>
</Box>
@ -322,8 +291,8 @@ export default function ButtonSocial () {
</Box>
<Box sx={{display: 'flex', justifyContent: 'center', gap: '10px'}}>
<Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC', borderColor: theme.palette.brightPurple.main}}>Скачать PNG</Button>
<Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC', borderColor: theme.palette.brightPurple.main}}>Скачать PNG</Button>
<Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC'}}>Скачать PNG</Button>
<Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC'}}>Скачать PNG</Button>
</Box>
</Box>
</Box>

49
src/pages/InstallQuiz/InstallQuiz.tsx
View File

@ -24,10 +24,9 @@ import AutoOpen from '../../assets/AutoOpen.png';
import WidgetImg from '../../assets/Widget.png';
import OneIconBorder from "../../assets/icons/OneIconBorder";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import CustomButton from "../../components/CustomButton";
import CustomTextField from "@ui_kit/CustomTextField";
import VkIconButton from "../../assets/icons/VkIconButton";
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
import SelectableButton from "@ui_kit/SelectableButton";
import ButtonSocial from "./ButtonSocial";
import OnButtonInstall from "./OnButtonInstall";
import BannerInstall from "./BannerInstall";
@ -394,28 +393,13 @@ export default function InstallQuiz() {
</Box>
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
<CustomButton
<Button
variant="outlined"
onClick={handleCloseVk}
sx={{
border: `1px solid ${theme.palette.brightPurple.main}`,
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>Отмена</CustomButton>
<CustomButton
>Отмена</Button>
<Button
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Готово</CustomButton>
>Готово</Button>
</Box>
</Box>
</Box>
@ -546,28 +530,13 @@ export default function InstallQuiz() {
<Typography sx={{fontSize: '14px', color: theme.palette.grey2.main}}>
Привязка домена и обновление DNS записей может занять до 48 часов
</Typography>
<CustomButton
<Button
variant="outlined"
onClick={handleCloseDom}
sx={{
border: `1px solid ${theme.palette.brightPurple.main}`,
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>Отмена</CustomButton>
<CustomButton
>Отмена</Button>
<Button
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Готово</CustomButton>
>Готово</Button>
</Box>
</Box>
</Box>

2
src/pages/Questions/DataOptions/DataOptions.tsx
View File

@ -3,7 +3,7 @@ import ButtonsOptions from "../ButtonsOptions";
import SwitchData from "./switchData";
import React, {useState} from "react";
import InfoIcon from "../../../assets/icons/InfoIcon";
import SelectableButton from "../../../components/CreateQuiz/SelectableButton";
import SelectableButton from "@ui_kit/SelectableButton";
type dataType = "calendar" | "mask";

5
src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
View File

@ -1,10 +1,9 @@
import { Box, Typography, useTheme } from "@mui/material";
import {Box, Button, Typography, useTheme} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../../assets/icons/InfoIcon";
import { useState } from "react";
import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2";
import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1";
import CustomButton from "../../../components/CustomButton";
import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11";
import ProportionsIcon21 from "../../../assets/icons/questionsPage/ProportionsIcon21";
import ProportionsIcon12 from "../../../assets/icons/questionsPage/ProportionsIcon12";
@ -18,7 +17,7 @@ interface Props {
export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
const theme = useTheme();
return (
<CustomButton
<Button
onClick={onClick}
variant="outlined"
startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}

2
src/pages/Questions/UploadImage.tsx
View File

@ -1,5 +1,5 @@
import {Typography, Box, useTheme, ButtonBase, Modal} from "@mui/material";
import UploadBox from "../../components/CreateQuiz/UploadBox";
import UploadBox from "@ui_kit/UploadBox";
import UploadIcon from "../../assets/icons/UploadIcon";
import * as React from "react";

33
src/pages/Questions/branchingQuestions.tsx
View File

@ -16,11 +16,9 @@ import {
useTheme,
} from "@mui/material";
import * as React from "react";
import InfoIcon from "../../assets/icons/InfoIcon";
import ArrowDown from "../../assets/icons/ArrowDownIcon";
import CustomButton from "../../components/CustomButton";
import ArrowDown from "@icons/ArrowDownIcon";
import { useState } from "react";
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
@ -60,7 +58,6 @@ export default function BranchingQuestions() {
width: "100%",
bgcolor: "background.paper",
borderRadius: "12px",
boxShadow: 24,
p: 0,
}}
@ -261,32 +258,16 @@ export default function BranchingQuestions() {
</FormControl>
</Box>
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
<CustomButton
<Button
variant="outlined"
onClick={handleClose}
sx={{
border: `1px solid ${theme.palette.brightPurple.main}`,
color: theme.palette.brightPurple.main,
width: "auto",
ml: "auto",
px: "20px",
py: "9px",
}}
>
Отмена
</CustomButton>
<CustomButton
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>
</Button>
<Button
variant="contained">
Готово
</CustomButton>
</Button>
</Box>
</Box>
</Box>

18
src/pages/Questions/helpQuestions.tsx
View File

@ -1,11 +1,10 @@
import {Box, ButtonBase, Modal, Typography, useTheme} from "@mui/material";
import {Box, Button, ButtonBase, Modal, Typography, useTheme} from "@mui/material";
import * as React from 'react';
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
import SelectableButton from "@ui_kit/SelectableButton";
import CustomTextField from "@ui_kit/CustomTextField";
import {useState} from "react";
import UploadIcon from "../../assets/icons/UploadIcon";
import UploadBox from "../../components/CreateQuiz/UploadBox";
import CustomButton from "../../components/CustomButton";
import UploadBox from "@ui_kit/UploadBox";
type BackgroundType = "text" | "video";
type BackgroundTypeModal = "linkVideo" | "ownVideo"
@ -84,16 +83,9 @@ export default function HelpQuestions() {
>
<Typography>Видео можно вставить с любого хостинга:
YouTube, Vimeo или загрузить собственное</Typography>
<CustomButton
<Button
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>Готово</CustomButton>
>Готово</Button>
</Box>
<Box sx={{padding: '20px', gap: '10px', display: 'flex'}}>
<SelectableButton isSelected={backgroundTypeModal === "linkVideo"} onClick={() => setBackgroundTypeModal("linkVideo")}>

0
src/components/CreationFullCard.tsx → src/pages/Result/CreationFullCard.tsx
View File

5
src/pages/Result/DescriptionForm/ButtinsOptionsForm.tsx
View File

@ -1,14 +1,11 @@
import React from "react";
import { Box, IconButton, useTheme } from "@mui/material";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import SettingIcon from "@icons/questionsPage/settingIcon";
import Branching from "@icons/questionsPage/branching";
import HideIcon from "@icons/questionsPage/hideIcon";
import CopyIcon from "@icons/questionsPage/CopyIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import StarIconPoints from "./StarIconsPoints";
interface Props {
@ -31,7 +28,7 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
value: "branching",
},
{
icon: <StarIconPoints color={switchState === "Points" ? "#ffffff" : theme.palette.grey3.main} />,
icon: <StarIconPoints color={switchState === "points" ? "#ffffff" : theme.palette.grey3.main} />,
title: "Баллы",
value: "points",
},

10
src/pages/Result/DescriptionForm/DescriptionForm.tsx
View File

@ -2,21 +2,15 @@ import React from "react";
import { useState } from "react";
import {Box, Button, IconButton, TextField, Typography} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import CustomButton from "../../../components/CustomButton";
import SwitchAnswerOptions from "./SwitchAnswerOptions";
import SwitchResult from "./SwitchResult";
import ButtonsOptionsForm from "./ButtinsOptionsForm";
import PriceButtons from "./PriceButton";
import DiscountButtons from "./DiscountButtons";
import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "@icons/questionsPage/OneIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import PointsIcon from "@icons/questionsPage/PointsIcon";
import Info from "@icons/Info";
import ImageAndVideoButtons from "./ImageAndVideoButtons";
export const DescriptionForm = () => {
@ -172,7 +166,7 @@ export const DescriptionForm = () => {
)}
</Box>
<ButtonsOptionsForm switchState={switchState} SSHC={SSHC} />
<SwitchAnswerOptions switchState={switchState} />
<SwitchResult switchState={switchState} />
</Box>
);
};

23
src/pages/Result/DescriptionForm/DiscountButtons.tsx
View File

@ -1,6 +1,5 @@
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import {Box, IconButton, Typography, useTheme} from "@mui/material";
import CustomButton from "../../../components/CustomButton";
import {Box, Button, IconButton, Typography, useTheme} from "@mui/material";
export default function DiscountButtons() {
const theme = useTheme();
@ -15,44 +14,36 @@ export default function DiscountButtons() {
</IconButton>
</Box>
<Box component="div" sx={{ mb: "20px" }}>
<CustomButton
<Button
variant="contained"
sx={{
color: "#9A9AAF",
backgroundColor: "#F2F3F7",
width: "86px",
height: "48px",
border: "1px solid #9A9AAF",
}}
>
10000
</CustomButton>
<CustomButton
</Button>
<Button
variant="contained"
sx={{
color: "#FFFFFF",
backgroundColor: theme.palette.brightPurple.main,
width: "53px",
height: "48px",
ml: "8px",
border: "1px solid #9A9AAF",
}}
>
₽
</CustomButton>
<CustomButton
</Button>
<Button
variant="contained"
sx={{
color: theme.palette.grey2.main,
backgroundColor: theme.palette.background.default,
width: "53px",
height: "48px",
ml: "8px",
border: "1px solid #9A9AAF",
}}
>
%
</CustomButton>
</Button>
</Box>
</Box>
);

23
src/pages/Result/DescriptionForm/PointsQuestions.tsx
View File

@ -12,13 +12,11 @@ import {
} from "@mui/material";
import * as React from "react";
import ArrowDown from "@icons/ArrowDownIcon";
import CustomButton from "../../../components/CustomButton";
import { useState } from "react";
export default function PointsQuestions() {
const theme = useTheme();
const [open, setOpen] = useState(false);
const [condition, setCondition] = useState<boolean>(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
@ -27,11 +25,6 @@ export default function PointsQuestions() {
setDisplay(event.target.value);
};
const [value, setValue] = React.useState("1");
const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue((event.target as HTMLInputElement).value);
};
return (
<>
<Button onClick={handleOpen}>открыть</Button>
@ -51,7 +44,6 @@ export default function PointsQuestions() {
width: "100%",
bgcolor: "background.paper",
borderRadius: "12px",
boxShadow: 24,
p: 0,
}}
@ -184,7 +176,6 @@ export default function PointsQuestions() {
</Select>
</FormControl>
<TextField
// value={text}
placeholder="100"
fullWidth
sx={{
@ -208,19 +199,11 @@ export default function PointsQuestions() {
</Box>
</Box>
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
<CustomButton
<Button
onClick={() => handleClose()}
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
color: "white",
width: "auto",
px: "20px",
py: "9px",
}}
>
variant="contained">
Готово
</CustomButton>
</Button>
</Box>
</Box>
</Box>

9
src/pages/Result/DescriptionForm/PriceButton.tsx
View File

@ -1,7 +1,4 @@
import { Box, IconButton, SxProps, Theme, Typography } from "@mui/material";
import CustomButton from "../../../components/CustomButton";
import {Box, Button, IconButton, SxProps, Theme, Typography} from "@mui/material";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] = [
@ -75,7 +72,7 @@ export default function PriceButtons({ ButtonsActive, priceButtonsActive }: Prop
</Box>
<Box component="div" sx={{ mb: "20px" }}>
{priceButtonsArray.map(({ title, type, sx }, index) => (
<CustomButton
<Button
onClick={() => ButtonsActive(index, type)}
key={title}
sx={{
@ -85,7 +82,7 @@ export default function PriceButtons({ ButtonsActive, priceButtonsActive }: Prop
}}
>
{title}
</CustomButton>
</Button>
))}
</Box>
</Box>

8
src/pages/Result/DescriptionForm/StarIconsPoints.tsx
View File

@ -10,14 +10,14 @@ export default function StarIconPoints({ color }: Props) {
<path
d="M7 9.24452L5.1458 10.2695L5.5 8.09854L4 6.56119L6.0729 6.24468L7 4.26953L7.9271 6.24468L10 6.56119L8.5 8.09854L8.8542 10.2695L7 9.24452Z"
stroke={color}
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1 7.26953C1 10.5832 3.68629 13.2695 7 13.2695C10.3137 13.2695 13 10.5832 13 7.26953C13 3.95582 10.3137 1.26953 7 1.26953C3.68629 1.26953 1 3.95582 1 7.26953Z"
stroke={color}
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

2
src/pages/Result/DescriptionForm/SwitchAnswerOptions.tsx → src/pages/Result/DescriptionForm/SwitchResult.tsx
View File

@ -36,7 +36,7 @@ function ResponseSettings() {
);
}
export default function SwitchAnswerOptions({ switchState = "setting" }: Props) {
export default function SwitchResult({ switchState = "setting" }: Props) {
switch (switchState) {
case "setting":
return <ResponseSettings />;

11
src/pages/Result/Result.tsx
View File

@ -1,8 +1,6 @@
import { Link } from "react-router-dom";
import { Box, useTheme } from "@mui/material";
import CustomButton from "../../components/CustomButton";
import CreationFullCard from "../../components/CreationFullCard";
import {Box, Button, useTheme} from "@mui/material";
import CreationFullCard from "./CreationFullCard";
import Info from "../../assets/icons/Info";
@ -19,16 +17,15 @@ export const Result = () => {
/>
<Box sx={{ mt: "30px", alignItems: "center" }}>
<Link to="/settings">
<CustomButton
<Button
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
mr: "23px",
minWidth: "258px",
}}
>
Создать результаты
</CustomButton>
</Button>
</Link>
<Info />

2
src/pages/Result/Setting.tsx
View File

@ -2,7 +2,7 @@ import { Box, Button, Typography, useTheme } from "@mui/material";
import { SettingForm } from "./SettingForm";
import { DescriptionForm } from "./DescriptionForm/DescriptionForm";
import { ResultListForm } from "./ResultListForm";
import CustomWrapper from "../../components/CustomWrapper";
import CustomWrapper from "@ui_kit/CustomWrapper";
import Plus from "@icons/Plus";
import Info from "@icons/Info";
import IconPlus from "@icons/IconPlus";

6
src/pages/Result/SettingForm.tsx
View File

@ -1,7 +1,5 @@
import { useState } from "react";
import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
import CustomButton from "../../components/CustomButton";
import { SwitchSetting } from "./SwichResult";
import Info from "@icons/Info";
@ -79,7 +77,7 @@ export const SettingForm = () => {
</Box>
<Box sx={{ display: "flex", justifyContent: "space-between", mb: "20px" }}>
{buttonSetting.map(({ sx, title, type }, index) => (
<CustomButton
<Button
disableRipple
onClick={() => active(index, type)}
key={title}
@ -90,7 +88,7 @@ export const SettingForm = () => {
}}
>
{title}
</CustomButton>
</Button>
))}
</Box>
{typeActive === "e-mail" ? (

0
src/components/ComplexNavText.tsx → src/pages/createQuize/ComplexNavText.tsx
View File

0
src/components/CustomTab.tsx → src/pages/createQuize/CustomTab.tsx
View File

17
src/components/ExpandableQuizBlock.tsx → src/pages/createQuize/ExpandableQuizBlock.tsx
View File

@ -1,7 +1,6 @@
import { Box, IconButton, Typography, useTheme } from "@mui/material";
import ExpandIcon from "../assets/icons/ExpandIcon";
import {Box, Button, IconButton, Typography, useTheme} from "@mui/material";
import ExpandIcon from "@icons/ExpandIcon";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
import CustomButton from "./CustomButton";
interface Props {
@ -58,17 +57,15 @@ export default function ExpandableQuizBlock({ name }: Props) {
mt: "25px",
}}
>
<CustomButton
<Button
variant="outlined"
sx={{
p: "9px",
flexGrow: 1,
borderColor: theme.palette.brightPurple.main,
backgroundColor: "#EEE4FC",
color: theme.palette.grey3.main,
width: "100%"
}}
>Квизов нет</CustomButton>
<CustomButton
>Квизов нет</Button>
<Button
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
@ -76,7 +73,7 @@ export default function ExpandableQuizBlock({ name }: Props) {
width: "44px",
minWidth: "44px",
}}
>+</CustomButton>
>+</Button>
</Box>
</Box>
);

17
src/pages/createQuize/FirstQuiz.tsx
View File

@ -1,11 +1,8 @@
import { Typography, useTheme } from "@mui/material";
import ComplexNavText from "../../components/ComplexNavText";
import CustomButton from "../../components/CustomButton";
import {Button, Typography, useTheme} from "@mui/material";
import ComplexNavText from "./ComplexNavText";
import SectionWrapper from "@ui_kit/SectionWrapper";
export default function FirstQuiz() {
const theme = useTheme();
return (
<SectionWrapper
maxWidth="lg"
@ -24,14 +21,10 @@ export default function FirstQuiz() {
>
Создайте свой первый квиз
</Typography>
<CustomButton
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
}}
>
<Button
variant="contained">
Создать +
</CustomButton>
</Button>
</SectionWrapper>
);
}

2
src/pages/createQuize/MyQuizzes.tsx
View File

@ -1,5 +1,5 @@
import {useTheme, Box,} from "@mui/material";
import ExpandableQuizBlock from "../../components/ExpandableQuizBlock";
import ExpandableQuizBlock from "./ExpandableQuizBlock";
import MyQuizzesFull from "./MyQuizzesFull";

4
src/pages/createQuize/MyQuizzesFull.tsx
View File

@ -1,6 +1,6 @@
import {Typography, useTheme, Box, Button, SxProps, Theme} from "@mui/material";
import ComplexNavText from "../../components/ComplexNavText";
import QuizCard from "../../components/QuizCard";
import ComplexNavText from "./ComplexNavText";
import QuizCard from "./QuizCard";
import SectionWrapper from "@ui_kit/SectionWrapper";
import React from "react";

29
src/components/QuizCard.tsx → src/pages/createQuize/QuizCard.tsx
View File

@ -1,8 +1,7 @@
import { Box, IconButton, Typography, useTheme } from "@mui/material";
import ChartIcon from "../assets/icons/ChartIcon";
import CustomButton from "./CustomButton";
import LinkIcon from "../assets/icons/LinkIcon";
import PencilIcon from "../assets/icons/PencilIcon";
import {Box, Button, IconButton, Typography, useTheme} from "@mui/material";
import ChartIcon from "@icons/ChartIcon";
import LinkIcon from "@icons/LinkIcon";
import PencilIcon from "@icons/PencilIcon";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
@ -73,40 +72,30 @@ export default function QuizCard({ name, openCount = 0, applicationCount = 0, co
gap: "20px",
}}
>
<CustomButton
<Button
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
width: "140px",
}}
>
Заявки
</CustomButton>
<CustomButton
</Button>
<Button
variant="outlined"
startIcon={<PencilIcon />}
sx={{
borderColor: theme.palette.brightPurple.main,
color: theme.palette.brightPurple.main,
px: "21px",
py: "9px",
width: "auto",
"& .MuiButton-startIcon": {
mr: "4px",
}
}}
>
Редактировать
</CustomButton>
<CustomButton
</Button>
<Button
variant="outlined"
startIcon={<ChartIcon />}
sx={{
borderColor: theme.palette.brightPurple.main,
color: theme.palette.brightPurple.main,
p: "9px",
width: "auto",
minWidth: 0,
"& .MuiButton-startIcon": {
mr: 0,
ml: 0,

31
src/pages/createQuize/QuizGallery.tsx
View File

@ -1,13 +1,24 @@
import { Box, FormControl, InputAdornment, InputLabel, MenuItem, Select, Tabs, TextField, Typography, useTheme } from "@mui/material";
import ComplexNavText from "../../components/ComplexNavText";
import CustomButton from "../../components/CustomButton";
import {
Box,
Button,
FormControl,
InputAdornment,
InputLabel,
MenuItem,
Select,
Tabs,
TextField,
Typography,
useTheme
} from "@mui/material";
import ComplexNavText from "./ComplexNavText";
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 "../../components/CustomTab";
import QuizTemplateCard from "../../components/QuizTemplateCard";
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";
@ -62,7 +73,7 @@ export default function QuizGallery() {
<Typography variant="h4" sx={{ color: "white" }}>Пустой шаблон</Typography>
<Typography sx={{ color: "white" }}>Широкий инструментарий создания квизов с нуля</Typography>
</Box>
<CustomButton
<Button
variant="contained"
sx={{
ml: "auto",
@ -71,7 +82,7 @@ export default function QuizGallery() {
px: "30.5px",
width: "auto",
}}
>Начать</CustomButton>
>Начать</Button>
</Box>
<Box
sx={{
@ -248,15 +259,13 @@ export default function QuizGallery() {
}}
/>
<Typography mt="30px" variant="h4">Нет подходящего шаблона?</Typography>
<CustomButton
<Button
variant="contained"
sx={{
px: "20px",
width: "auto",
backgroundColor: theme.palette.brightPurple.main,
mt: "30px",
}}
>Создать квиз с нуля</CustomButton>
>Создать квиз с нуля</Button>
</SectionWrapper>
);
}

0
src/components/QuizTemplateCard.tsx → src/pages/createQuize/QuizTemplateCard.tsx
View File

18
src/pages/main.tsx
View File

@ -1,20 +1,20 @@
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";
import {useTheme} from "@mui/material";
import HeaderFull from "@ui_kit/Header/HeaderFull";
interface Props{
sidebar: boolean,
header: boolean,
page: JSX.Element
}
export default function Main ({
sidebar: boolean,
header: boolean,
page: react.csx
}) {
export default function Main ({sidebar, header, page}: Props) {
const theme = useTheme();
return (
<>
{header ? <CleverHeader/> : <></>}
{header ? <Header/> : <HeaderFull/>}
<Box sx={{
display: 'flex'
}}
@ -30,7 +30,7 @@ export default function Main ({
boxSizing: "border-box"
}}
>
<Outlet />
{page}
</Box>
</Box>
</>

0
src/components/CreateQuiz/CardWithImage.tsx → src/pages/startPage/CardWithImage.tsx
View File

6
src/components/CreateQuiz/SelectableIconButton.tsx → src/pages/startPage/SelectableIconButton.tsx
View File

@ -1,6 +1,4 @@
import { useTheme } from "@mui/material";
import CustomButton from "../CustomButton";
import {Button, useTheme} from "@mui/material";
interface Props {
Icon: React.ElementType;
@ -12,7 +10,7 @@ export default function SelectableIconButton({ Icon, isActive = false, onClick }
const theme = useTheme();
return (
<CustomButton
<Button
onClick={onClick}
variant="outlined"
startIcon={<Icon color={isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main} />}

6
src/pages/startPage/StartPageSettings.tsx
View File

@ -10,9 +10,9 @@ import LayoutExpandedIcon from "../../assets/icons/LayoutExpandedIcon";
import LayoutStandartIcon from "../../assets/icons/LayoutStandartIcon";
import MobilePhoneIcon from "../../assets/icons/MobilePhoneIcon";
import UploadIcon from "../../assets/icons/UploadIcon";
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
import SelectableIconButton from "../../components/CreateQuiz/SelectableIconButton";
import UploadBox from "../../components/CreateQuiz/UploadBox";
import SelectableButton from "@ui_kit/SelectableButton";
import SelectableIconButton from "./SelectableIconButton";
import UploadBox from "@ui_kit/UploadBox";
import CustomTextField from "@ui_kit/CustomTextField";

2
src/pages/startPage/steptwo.tsx
View File

@ -1,5 +1,5 @@
import {Box, Button, Typography} from "@mui/material";
import CardWithImage from "../../components/CreateQuiz/CardWithImage";
import CardWithImage from "./CardWithImage";
import cardImage1 from "../../assets/card-1.png";
import cardImage2 from "../../assets/card-2.png";
import cardImage3 from "../../assets/card-3.png";

22
src/components/CustomWrapper.tsx → src/ui_kit/CustomWrapper.tsx
View File

@ -1,11 +1,11 @@
import { useState } from "react";
import { Box, IconButton, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
import CrossedEyeIcon from "../assets/icons/CrossedEyeIcon";
import CopyIcon from "../assets/icons/CopyIcon";
import TrashIcon from "../assets/icons/TrashIcon";
import CountIcon from "../assets/icons/CountIcon";
import MenuIcon from "../assets/icons/MenuIcon";
import CrossedEyeIcon from "@icons/CrossedEyeIcon";
import CopyIcon from "@icons/CopyIcon";
import TrashIcon from "@icons/TrashIcon";
import CountIcon from "@icons/CountIcon";
import MenuIcon from "@icons/MenuIcon";
interface Props {
text: string;
@ -97,9 +97,9 @@ export default function CustomWrapper({ text, sx, result }: Props) {
<path
d="M7.5 19.5625L15 12.0625L22.5 19.5625"
stroke="#7E2AEA"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<IconButton>
@ -137,9 +137,9 @@ export default function CustomWrapper({ text, sx, result }: Props) {
<path
d="M7.5 19.5625L15 12.0625L22.5 19.5625"
stroke="#7E2AEA"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)}

25
src/ui_kit/Header/Header.tsx
View File

@ -1,16 +1,12 @@
import { Box, Container, FormControl, IconButton, TextField, useTheme } from "@mui/material";
import CustomButton from "../../components/CustomButton";
import {Box, Button, Container, FormControl, IconButton, TextField, useTheme} from "@mui/material";
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;
}
export default function Header({ isLoggedIn }: Props) {
export default function Header() {
const theme = useTheme();
return (
@ -92,36 +88,27 @@ export default function Header({ isLoggedIn }: Props) {
gap: "15px",
}}
>
<CustomButton
<Button
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
>Предпросмотр</Button>
<Button
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>
>Опубликовать</Button>
<CustomAvatar sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
</Box>
</Container>

20
src/ui_kit/Header/Navbar.tsx
View File

@ -1,20 +0,0 @@
import NavbarCollapsed from "./NavbarCollapsed";
import NavbarCreateQuiz from "./NavbarCreateQuiz";
import Header from "@ui_kit/Header/Header";
import HeaderFull from "@ui_kit/Header/HeaderFull";
interface Props {
isLoggedIn: boolean;
isCollapsed?: boolean;
mode?: "createQuiz" | "default";
}
export default function Navbar({ isLoggedIn, isCollapsed = false, mode = "default" }: Props) {
return isLoggedIn ? (
<Header isLoggedIn={true}/>
):(
<HeaderFull/>
)
}

126
src/ui_kit/Header/NavbarCreateQuiz.tsx
View File

@ -1,126 +0,0 @@
import { Box, Container, FormControl, IconButton, TextField, useTheme } from "@mui/material";
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";
export default function NavbarCreateQuiz() {
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>
);
}

0
src/components/CreateQuiz/MenuItem.tsx → src/ui_kit/MenuItem.tsx
View File

0
src/components/CreateQuiz/SelectableButton.tsx → src/ui_kit/SelectableButton.tsx
View File

6
src/ui_kit/Sidebar.tsx
View File

@ -12,7 +12,7 @@ import PencilCircleIcon from "../assets/icons/PencilCircleIcon";
import PuzzlePieceIcon from "../assets/icons/PuzzlePieceIcon";
import GearIcon from "../assets/icons/GearIcon";
import LayoutIcon from "../assets/icons/LayoutIcon";
import MenuItem from "../components/CreateQuiz/MenuItem";
import MenuItem from "./MenuItem";
const createQuizMenuItems = [
[LayoutIcon, "Стартовая страница"],
@ -31,7 +31,7 @@ const quizSettingsMenuItems = [
] as const;
export default function Sidebar(sidebar: boolean) {
export default function Sidebar() {
const theme = useTheme();
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
const [activeMenuItemIndex, setActiveMenuItemIndex] = useState<number>(0);
@ -46,7 +46,7 @@ export default function Sidebar(sidebar: boolean) {
minWidth: isMenuCollapsed ? "80px" : "230px",
width: isMenuCollapsed ? "80px" : "230px",
height: 'calc(100vh - 80px)',
display: sidebar ? "flex" : "none",
display: "flex",
flexDirection: "column",
py: "19px",
transitionProperty: "width, min-width",

0
src/components/CreateQuiz/UploadBox.tsx → src/ui_kit/UploadBox.tsx
View File