SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
ArtChaos189 2023-04-23 11:39:34 +03:00
parent 8b8f23a0d1
commit 6c70b01cf8
14 changed files with 188 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/App.tsx
View File

@ -1,4 +1,4 @@
import { CssBaseline, ThemeProvider } from "@mui/material"; import { CssBaseline } from "@mui/material";
import { styled } from "@mui/material/styles"; import { styled } from "@mui/material/styles";
import CreateQuiz from "./components/CreateQuiz/CreateQuiz"; import CreateQuiz from "./components/CreateQuiz/CreateQuiz";
import FirstQuiz from "./pages/startPage/FirstQuiz"; import FirstQuiz from "./pages/startPage/FirstQuiz";
@ -6,33 +6,32 @@ import MyQuizzes from "./components/MyQuizzes";
import Navbar from "./components/Navbar/Navbar"; import Navbar from "./components/Navbar/Navbar";
import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz"; import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz";
import QuizGallery from "./components/QuizGallery"; import QuizGallery from "./components/QuizGallery";
// import lightTheme from "./utils/themes/light"; import lightTheme from "./utils/themes/light";
// import darkTheme from "./utils/themes/dark"; import darkTheme from "./utils/themes/dark";
const Divider = styled("div")(() => ({ const Divider = styled("div")(() => ({
height: "30px", height: "30px",
backgroundColor: "black", backgroundColor: "black",
})); }));
function App() { function App() {
return (
<>
<CssBaseline />
<Navbar isLoggedIn={true} />
<FirstQuiz />
<Divider />
return ( <MyQuizzes />
<> <Divider />
<CssBaseline />
<Navbar isLoggedIn={true} />
<FirstQuiz />
<Divider />
<MyQuizzes /> <QuizGallery />
<Divider /> <Divider />
<QuizGallery /> <NavbarCreateQuiz />
<Divider /> <CreateQuiz />
</>
<NavbarCreateQuiz /> );
<CreateQuiz />
</>
);
} }
export default App; export default App;

23
src/components/CustomWrapper.tsx
View File

@ -1,7 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { Box, IconButton, SvgIcon, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material"; import { Box, IconButton, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import CrossedEyeIcon from "@icons/CrossedEyeIcon"; import CrossedEyeIcon from "@icons/CrossedEyeIcon";
import CopyIcon from "@icons/CopyIcon"; import CopyIcon from "@icons/CopyIcon";
import TrashIcon from "@icons/TrashIcon"; import TrashIcon from "@icons/TrashIcon";
@ -188,26 +187,6 @@ export default function CustomWrapper({ text, sx, result }: Props) {
> >
10 руб. 10 руб.
</Typography> </Typography>
{upSm ? (
<Typography
component="div"
sx={{
color: theme.palette.text.secondary,
borderBottom: `1px solid ${theme.palette.text.secondary}`,
width: "max-content",
lineHeight: "19px",
cursor: "pointer",
"&:active": {
color: "#FB5607",
borderBottomColor: "#FB5607",
},
}}
>
Удалить
</Typography>
) : (
<SvgIcon component={ClearIcon}></SvgIcon>
)}
</Box> </Box>
</Box> </Box>
)} )}

25
src/components/DescriptionForm/ButtinsOptionsForm.tsx
View File

@ -1,12 +1,14 @@
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react"; import React from "react";
import SettingIcon from "@icons/questionsPage/settingIcon";
import Clue from "@icons/questionsPage/clue";
import Branching from "@icons/questionsPage/branching";
import { Box, IconButton, useTheme } from "@mui/material"; 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 HideIcon from "@icons/questionsPage/hideIcon";
import CopyIcon from "@icons/questionsPage/CopyIcon"; import CopyIcon from "@icons/questionsPage/CopyIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import DeleteIcon from "@icons/questionsPage/deleteIcon";
import StarIconPoints from "./StarIconsPoints"; import StarIconPoints from "./StarIconsPoints";
interface Props { interface Props {
@ -16,6 +18,7 @@ interface Props {
export default function ButtonsOptionsForm({ SSHC, switchState }: Props) { export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
const theme = useTheme(); const theme = useTheme();
const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [ const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
{ {
icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />, icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
@ -50,19 +53,19 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
gap: "10px", gap: "10px",
}} }}
> >
{buttonSetting.map((e, i) => ( {buttonSetting.map(({ icon, title, value }, index) => (
<MiniButtonSetting <MiniButtonSetting
key={i} key={index}
onClick={() => { onClick={() => {
SSHC(e.value); SSHC(value);
}} }}
sx={{ sx={{
backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : "transparent", backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
color: switchState === e.value ? "#ffffff" : theme.palette.grey3.main, color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
}} }}
> >
{e.icon} {icon}
{e.title} {title}
</MiniButtonSetting> </MiniButtonSetting>
))} ))}
</Box> </Box>

30
src/components/DescriptionForm/DescriptionForm.tsx
View File

@ -1,30 +1,31 @@
import React from "react";
import { useState } from "react"; import { useState } from "react";
import { Box, IconButton, TextField, Typography } from "@mui/material"; import { Box, IconButton, TextField, Typography } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import CustomButton from "../CustomButton"; import CustomButton from "../CustomButton";
import SwitchAnswerOptions from "./SwitchAnswerOptions";
import ButtonsOptionsForm from "./ButtinsOptionsForm";
import PriceButtons from "./PriceButton"; import PriceButtons from "./PriceButton";
import DiscountButtons from "./DiscountButtons"; import DiscountButtons from "./DiscountButtons";
import ButtonsOptions from "../../pages/Questions/ButtonsOptions";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "@icons/questionsPage/OneIcon"; import OneIcon from "@icons/questionsPage/OneIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import PointsIcon from "@icons/questionsPage/PointsIcon"; import PointsIcon from "@icons/questionsPage/PointsIcon";
import ImageAndVideoButtons from "./ImageAndVideoButtons";
import Info from "@icons/Info"; import Info from "@icons/Info";
import SwitchAnswerOptions from "./SwitchAnswerOptions";
import ButtonsOptionsForm from "./ButtinsOptionsForm";
export default function DescriptionForm() { import ImageAndVideoButtons from "./ImageAndVideoButtons";
const [switchState, setSwitchState] = useState("setting");
const [callToAction, setCallToAction] = useState<boolean>(false); export const DescriptionForm = () => {
const [switchState, setSwitchState] = useState<string>("");
const [priceButtonsActive, setPriceButtonsActive] = useState<number>(0); const [priceButtonsActive, setPriceButtonsActive] = useState<number>(0);
const [priceButtonsType, setPriceButtonsType] = useState<string>(); const [priceButtonsType, setPriceButtonsType] = useState<string>();
const [forwarding, setForwarding] = useState<boolean>(false); const [forwarding, setForwarding] = useState<boolean>(false);
const ButtonsActive = (index: number, type: string) => { const buttonsActive = (index: number, type: string) => {
setPriceButtonsActive(index); setPriceButtonsActive(index);
setPriceButtonsType(type); setPriceButtonsType(type);
}; };
@ -53,13 +54,11 @@ export default function DescriptionForm() {
</Box> </Box>
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex" }}>
<PriceButtons ButtonsActive={ButtonsActive} priceButtonsActive={priceButtonsActive} /> <PriceButtons ButtonsActive={buttonsActive} priceButtonsActive={priceButtonsActive} />
<DiscountButtons /> <DiscountButtons />
</Box> </Box>
<TextField <TextField
// value={text}
fullWidth fullWidth
placeholder="Описание" placeholder="Описание"
sx={{ sx={{
@ -92,7 +91,6 @@ export default function DescriptionForm() {
</Box> </Box>
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex" }}>
<TextField <TextField
// value={text}
placeholder="Узнать подробнее" placeholder="Узнать подробнее"
fullWidth fullWidth
sx={{ sx={{
@ -142,7 +140,6 @@ export default function DescriptionForm() {
</Box> </Box>
<Box> <Box>
<TextField <TextField
// value={text}
placeholder="https://exemple.ru" placeholder="https://exemple.ru"
fullWidth fullWidth
sx={{ sx={{
@ -165,13 +162,12 @@ export default function DescriptionForm() {
</Box> </Box>
</Box> </Box>
) : ( ) : (
"" <React.Fragment />
)} )}
</Box> </Box>
</Box> </Box>
) : ( ) : (
<CustomButton <CustomButton
onClick={() => setCallToAction(true)}
variant="contained" variant="contained"
sx={{ sx={{
mb: "20px", mb: "20px",
@ -190,4 +186,4 @@ export default function DescriptionForm() {
<SwitchAnswerOptions switchState={switchState} /> <SwitchAnswerOptions switchState={switchState} />
</Box> </Box>
); );
} };

4
src/components/ResultListPage.tsx → src/components/ResultListForm.tsx
View File

@ -9,7 +9,7 @@ import ProportionsIcon21 from "@icons/questionsPage/ProportionsIcon21";
import ProportionsIcon11 from "@icons/questionsPage/ProportionsIcon11"; import ProportionsIcon11 from "@icons/questionsPage/ProportionsIcon11";
import ProportionsIcon12 from "@icons/questionsPage/ProportionsIcon12"; import ProportionsIcon12 from "@icons/questionsPage/ProportionsIcon12";
export default function ResultListPage() { export const ResultListForm = () => {
const [alignType, setAlignType] = useState<"left" | "right">("left"); const [alignType, setAlignType] = useState<"left" | "right">("left");
const [proportions, setProportions] = useState<"oneOne" | "twoOne" | "oneTwo">("oneOne"); const [proportions, setProportions] = useState<"oneOne" | "twoOne" | "oneTwo">("oneOne");
return ( return (
@ -193,4 +193,4 @@ export default function ResultListPage() {
</Box> </Box>
</Box> </Box>
); );
} };

27
src/components/SettingForm.tsx
View File

@ -1,17 +1,18 @@
import { useState } from "react";
import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material"; import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
import Info from "@icons/Info";
import CustomButton from "./CustomButton"; import CustomButton from "./CustomButton";
import SwichResult from "./SwichResult"; import { SwitchSetting } from "./SwichResult";
import Info from "@icons/Info";
import listChecks from "../assets/icon/listChecks.svg"; import listChecks from "../assets/icon/listChecks.svg";
import ShareNetwork from "../assets/icon/ShareNetwork.svg"; import ShareNetwork from "../assets/icon/ShareNetwork.svg";
import ArrowCounterClockWise from "../assets/icon/ArrowCounterClockWise.svg"; import ArrowCounterClockWise from "../assets/icon/ArrowCounterClockWise.svg";
import { useState } from "react";
const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [ const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
{ {
sx: { backgroundColor: "#7E2AEA", color: "white", width: "237px", height: "44px" }, sx: { backgroundColor: "#7E2AEA", color: "white", width: "237px", height: "44px", border: "1px solid #9A9AAF" },
title: "До формы контактов", title: "До формы контактов",
type: "toContactForm", type: "toContactForm",
}, },
@ -27,7 +28,7 @@ const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
}, },
]; ];
export default function SettingForm() { export const SettingForm = () => {
const [activeIndex, setActiveIndex] = useState<number>(); const [activeIndex, setActiveIndex] = useState<number>();
const [typeActive, setTypeActive] = useState<string>(); const [typeActive, setTypeActive] = useState<string>();
@ -37,7 +38,7 @@ export default function SettingForm() {
}; };
return ( return (
<Box sx={{ width: "796px" }}> <Box component="section" sx={{ width: "796px" }}>
<Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}> <Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
<Typography sx={{ pr: "10px" }} variant="h5"> <Typography sx={{ pr: "10px" }} variant="h5">
Настройки результатов Настройки результатов
@ -60,7 +61,9 @@ export default function SettingForm() {
mb: "20px", mb: "20px",
}} }}
> >
<Typography sx={{ color: "#9A9AAF" }}>Показывать результат</Typography> <Typography component="p" sx={{ color: "#9A9AAF" }}>
Показывать результат
</Typography>
<IconButton> <IconButton>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" rx="6" fill="#EEE4FC" /> <rect width="30" height="30" rx="6" fill="#EEE4FC" />
@ -91,12 +94,12 @@ export default function SettingForm() {
))} ))}
</Box> </Box>
{typeActive === "e-mail" ? ( {typeActive === "e-mail" ? (
<SwichResult icon={listChecks} text="Показывать несколько результатов" /> <SwitchSetting icon={listChecks} text="Показывать несколько результатов" />
) : ( ) : (
<> <>
<SwichResult icon={listChecks} text="Показывать несколько результатов" /> <SwitchSetting icon={listChecks} text="Показывать несколько результатов" />
<SwichResult icon={ShareNetwork} text="Поделиться результатами" /> <SwitchSetting icon={ShareNetwork} text="Поделиться результатами" />
<SwichResult icon={ArrowCounterClockWise} text="Кнопка `Пройти тест заново`" /> <SwitchSetting icon={ArrowCounterClockWise} text="Кнопка `Пройти тест заново`" />
</> </>
)} )}
</Box> </Box>
@ -125,4 +128,4 @@ export default function SettingForm() {
</Box> </Box>
</Box> </Box>
); );
} };

4
src/components/SwichResult.tsx
View File

@ -5,7 +5,7 @@ type Props = {
text: string; text: string;
icon: any; icon: any;
}; };
export default function SwichResult({ text, icon }: Props) { export const SwitchSetting = ({ text, icon }: Props) => {
const [active, setActive] = useState<boolean>(false); const [active, setActive] = useState<boolean>(false);
return ( return (
<Box <Box
@ -41,4 +41,4 @@ export default function SwichResult({ text, icon }: Props) {
</IconButton> </IconButton>
</Box> </Box>
); );
} };

22
src/index.tsx
View File

@ -1,24 +1,19 @@
import React from "react"; 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 { BrowserRouter, Route, Routes } from "react-router-dom";
import lightTheme from "./utils/themes/light"; import ReactDOM from "react-dom/client";
import { ThemeProvider } from "@mui/material"; 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 { Setting } from "./pages/Setting";
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 StartPage from "./pages/startPage/StartPage";
import Main from "./pages/main"; import Main from "./pages/main";
import FirstQuiz from "./pages/startPage/FirstQuiz"; import FirstQuiz from "./pages/startPage/FirstQuiz";
import QuestionsPage from "./pages/Questions/QuestionsPage"; import QuestionsPage from "./pages/Questions/QuestionsPage";
import Result from "./pages/Result"; import { Result } from "./pages/Result/Result";
import lightTheme from "./utils/themes/light";
import "./index.css";
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render( root.render(
@ -31,6 +26,7 @@ root.render(
<Route path="/create" element={<StartPage />} /> <Route path="/create" element={<StartPage />} />
<Route path="/questions" element={<QuestionsPage />} /> <Route path="/questions" element={<QuestionsPage />} />
<Route path="/result" element={<Result />} /> <Route path="/result" element={<Result />} />
<Route path="/settings" element={<Setting />} />
</Route> </Route>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>

14
src/pages/Questions/ButtonsOptions.tsx
View File

@ -49,19 +49,19 @@ export default function ButtonsOptions({ SSHC, switchState }: Props) {
gap: "10px", gap: "10px",
}} }}
> >
{buttonSetting.map((e, i) => ( {buttonSetting.map(({ icon, title, value }) => (
<MiniButtonSetting <MiniButtonSetting
key={i} key={title}
onClick={() => { onClick={() => {
SSHC(e.value); SSHC(value);
}} }}
sx={{ sx={{
backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : "transparent", backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
color: switchState === e.value ? "#ffffff" : theme.palette.grey3.main, color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
}} }}
> >
{e.icon} {icon}
{e.title} {title}
</MiniButtonSetting> </MiniButtonSetting>
))} ))}
</Box> </Box>

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

@ -35,6 +35,7 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
ml: 0, ml: 0,
}, },
"&:hover": { "&:hover": {
border: "none",
borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main, borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
}, },
}} }}

106
src/pages/Questions/RatingOptions/settingRating.tsx
View File

@ -1,8 +1,9 @@
import {Box, ButtonBase, Slider, Typography, useTheme} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "@icons/InfoIcon";
import React from "react"; import React from "react";
import RatingStar from "@icons/questionsPage/ratingStar"; import { Box, ButtonBase, Slider, Typography, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "@icons/InfoIcon";
import TropfyIcon from "@icons/questionsPage/tropfyIcon"; import TropfyIcon from "@icons/questionsPage/tropfyIcon";
import FlagIcon from "@icons/questionsPage/FlagIcon"; import FlagIcon from "@icons/questionsPage/FlagIcon";
import HeartIcon from "@icons/questionsPage/heartIcon"; import HeartIcon from "@icons/questionsPage/heartIcon";
@ -11,51 +12,58 @@ import LightbulbIcon from "@icons/questionsPage/lightbulbIcon";
import HashtagIcon from "@icons/questionsPage/hashtagIcon"; import HashtagIcon from "@icons/questionsPage/hashtagIcon";
import StarIconMini from "@icons/questionsPage/StarIconMini"; import StarIconMini from "@icons/questionsPage/StarIconMini";
export default function SettingSlider() { export default function SettingSlider() {
const theme = useTheme(); const theme = useTheme();
const [current, setCurrent] = React.useState(1) const [current, setCurrent] = React.useState(1);
const buttonRatingForm: {icon: JSX.Element} [] =[ const buttonRatingForm: { icon: JSX.Element }[] = [
{icon: <StarIconMini color={theme.palette.grey3.main}/>}, { icon: <StarIconMini color={theme.palette.grey3.main} /> },
{icon: <TropfyIcon color={theme.palette.grey3.main}/>}, { icon: <TropfyIcon color={theme.palette.grey3.main} /> },
{icon: <FlagIcon color={theme.palette.grey3.main}/>}, { icon: <FlagIcon color={theme.palette.grey3.main} /> },
{icon: <HeartIcon color={theme.palette.grey3.main}/>}, { icon: <HeartIcon color={theme.palette.grey3.main} /> },
{icon: <LikeIcon color={theme.palette.grey3.main}/>}, { icon: <LikeIcon color={theme.palette.grey3.main} /> },
{icon: <LightbulbIcon color={theme.palette.grey3.main}/>}, { icon: <LightbulbIcon color={theme.palette.grey3.main} /> },
{icon: <HashtagIcon color={theme.palette.grey3.main}/>}, { icon: <HashtagIcon color={theme.palette.grey3.main} /> },
] ];
return ( return (
<Box sx={{display: 'flex'}}> <Box sx={{ display: "flex" }}>
<Box sx={{padding: '20px'}}> <Box sx={{ padding: "20px" }}>
<Typography sx={{marginBottom: '15px'}}>Настройки рейтинга</Typography> <Typography sx={{ marginBottom: "15px" }}>Настройки рейтинга</Typography>
<Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Форма</Typography> <Typography sx={{ color: theme.palette.grey2.main, fontSize: "16px", fontWeight: 400 }}>Форма</Typography>
<Box sx={{display: 'flex', marginBottom: '15px' }}> <Box sx={{ display: "flex", marginBottom: "15px" }}>
{buttonRatingForm.map( (e,i) => ( {buttonRatingForm.map((element, index) => (
<ButtonBase <ButtonBase
key={i} key={index}
onClick={()=>{setCurrent(i)}} onClick={() => {
sx={{backgroundColor: current === i ? theme.palette.brightPurple.main : 'transparent', setCurrent(index);
color: current === i ? '#ffffff' : theme.palette.grey3.main, }}
width: '40px', sx={{
height: '40px', backgroundColor: current === index ? theme.palette.brightPurple.main : "transparent",
borderRadius: '4px' color: current === index ? "#ffffff" : theme.palette.grey3.main,
}} width: "40px",
> height: "40px",
{e.icon} borderRadius: "4px",
</ButtonBase> }}
))} >
</Box> {element.icon}
<Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Количество</Typography> </ButtonBase>
<Slider defaultValue={5} min={1} max={10} aria-label="Default" valueLabelDisplay="auto" sx={{color: theme.palette.brightPurple.main}} /> ))}
</Box>
<Box sx={{padding: '20px'}}>
<Typography>Настройки вопросов</Typography>
<CustomCheckbox label={'Необязательный вопрос'}/>
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
</Box>
</Box> </Box>
); <Typography sx={{ color: theme.palette.grey2.main, fontSize: "16px", fontWeight: 400 }}>Количество</Typography>
}; <Slider
defaultValue={5}
min={1}
max={10}
aria-label="Default"
valueLabelDisplay="auto"
sx={{ color: theme.palette.brightPurple.main }}
/>
</Box>
<Box sx={{ padding: "20px" }}>
<Typography>Настройки вопросов</Typography>
<CustomCheckbox label={"Необязательный вопрос"} />
<CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
</Box>
</Box>
);
}

43
src/pages/Result.tsx
View File

@ -1,43 +0,0 @@
import CreationFullCard from "../components/CreationFullCard";
import image from "../assets/Rectangle 110.png";
import { Box, useTheme } from "@mui/material";
import CustomButton from "../components/CustomButton";
import { useState } from "react";
import ResultSetting from "../components/ResultSetting";
import Info from "@icons/Info";
export default function Result() {
const theme = useTheme();
const [settings, setSettings] = useState<boolean>(false);
return (
<Box>
{settings ? (
<ResultSetting setSettings={setSettings} />
) : (
<>
<CreationFullCard
text="Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке."
text2="Этот шаг - необязательный, квиз будет работать и без автоматических результатов."
image={image}
/>
<Box sx={{ mt: "30px", alignItems: "center" }}>
<CustomButton
onClick={() => setSettings(true)}
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
mr: "23px",
minWidth: "258px",
}}
>
Создать результаты
</CustomButton>
<Info />
</Box>
</>
)}
</Box>
);
}

38
src/pages/Result/Result.tsx Normal file
View File

@ -0,0 +1,38 @@
import { Link } from "react-router-dom";
import { Box, useTheme } from "@mui/material";
import CustomButton from "../../components/CustomButton";
import CreationFullCard from "../../components/CreationFullCard";
import Info from "@icons/Info";
import image from "../../assets/Rectangle 110.png";
export const Result = () => {
const theme = useTheme();
return (
<Box component="section">
<CreationFullCard
text="Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке."
text2="Этот шаг - необязательный, квиз будет работать и без автоматических результатов."
image={image}
/>
<Box sx={{ mt: "30px", alignItems: "center" }}>
<Link to="/settings">
<CustomButton
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
mr: "23px",
minWidth: "258px",
}}
>
Создать результаты
</CustomButton>
</Link>
<Info />
</Box>
</Box>
);
};

24
src/components/ResultSetting.tsx → src/pages/Setting.tsx
View File

@ -1,20 +1,18 @@
import { Box, Button, Typography, useTheme } from "@mui/material"; import { Box, Button, Typography, useTheme } from "@mui/material";
import CustomWrapper from "./CustomWrapper"; import { SettingForm } from "../components/SettingForm";
import CustomButton from "./CustomButton"; import { DescriptionForm } from "../components/DescriptionForm/DescriptionForm";
import BackButton from "./Button/BackButton"; import { ResultListForm } from "../components/ResultListForm";
import CustomWrapper from "../components/CustomWrapper";
import CustomButton from "../components/CustomButton";
import BackButton from "../components/Button/BackButton";
import Plus from "@icons/Plus"; import Plus from "@icons/Plus";
import Info from "@icons/Info"; import Info from "@icons/Info";
import IconPlus from "@icons/IconPlus"; import IconPlus from "@icons/IconPlus";
import SettingForm from "./SettingForm";
import DescriptionForm from "./DescriptionForm/DescriptionForm";
import ResultListPage from "./ResultListPage";
type Props = {
setSettings: React.Dispatch<React.SetStateAction<boolean>>;
};
export default function ResultSetting({ setSettings }: Props) { export const Setting = () => {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Box sx={{ width: "796px" }}> <Box sx={{ width: "796px" }}>
@ -24,7 +22,6 @@ export default function ResultSetting({ setSettings }: Props) {
</Typography> </Typography>
<Info /> <Info />
<Button <Button
onClick={() => setSettings(false)}
disableRipple disableRipple
sx={{ sx={{
ml: "auto", ml: "auto",
@ -83,7 +80,6 @@ export default function ResultSetting({ setSettings }: Props) {
<Typography component="div" sx={{ ml: "auto" }}> <Typography component="div" sx={{ ml: "auto" }}>
<BackButton /> <BackButton />
<CustomButton <CustomButton
onClick={() => setSettings(true)}
variant="contained" variant="contained"
sx={{ sx={{
backgroundColor: theme.palette.brightPurple.main, backgroundColor: theme.palette.brightPurple.main,
@ -98,8 +94,8 @@ export default function ResultSetting({ setSettings }: Props) {
</Box> </Box>
<SettingForm /> <SettingForm />
<ResultListPage /> <ResultListForm />
<DescriptionForm /> <DescriptionForm />
</Box> </Box>
); );
} };