diff --git a/src/components/icons/ContactFormIcon/supplementIcon.tsx b/src/components/icons/ContactFormIcon/supplementIcon.tsx new file mode 100644 index 00000000..5b1240cd --- /dev/null +++ b/src/components/icons/ContactFormIcon/supplementIcon.tsx @@ -0,0 +1,25 @@ +import { Box } from "@mui/material"; + +interface Props { + color: string; +} + +export default function SupplementIcon({color}: Props) { + + return ( + + + + + + + ); +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index ca3131f9..3b02b3b7 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,43 +1,56 @@ -import React from "react"; -import { BrowserRouter, Route, Routes } from "react-router-dom"; -import ReactDOM from "react-dom/client"; -import { ThemeProvider } from "@mui/material"; - -import { Setting } from "./pages/Setting"; +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 './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"; +import Main from "./pages/main" import FirstQuiz from "./pages/startPage/FirstQuiz"; import QuestionsPage from "./pages/Questions/QuestionsPage"; import { Result } from "./pages/Result/Result"; +import ContactFormPage from "./pages/ContactFormPage/ContactFormPage"; +import { Setting } from "./pages/Setting"; -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( - - - + + + - }> - } /> - } /> - } /> - } /> - } /> + }> + } /> + } /> + } /> + } /> + } /> + } /> + - + ); + + // }/> // } /> // } /> // } /> // } /> // } /> -// } /> +// } /> \ No newline at end of file diff --git a/src/mui.d.ts b/src/mui.d.ts index 399f6032..4c087c1b 100755 --- a/src/mui.d.ts +++ b/src/mui.d.ts @@ -9,6 +9,7 @@ declare module "@mui/material/styles" { grey1: Palette["primary"], grey2: Palette["primary"], grey3: Palette["primary"], + grey4: Palette ["primary"], orange: Palette["primary"], navbarbg: Palette["primary"], } @@ -20,6 +21,7 @@ declare module "@mui/material/styles" { grey1?: PaletteOptions["primary"], grey2?: PaletteOptions["primary"], grey3?: PaletteOptions["primary"], + grey4?: PaletteOptions ["primary"], orange?: PaletteOptions["primary"], navbarbg?: PaletteOptions["primary"], } diff --git a/src/pages/ContactFormPage/BranchingForm.tsx b/src/pages/ContactFormPage/BranchingForm.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/ContactFormPage/ButtonSettingForms.tsx b/src/pages/ContactFormPage/ButtonSettingForms.tsx new file mode 100644 index 00000000..dadc4066 --- /dev/null +++ b/src/pages/ContactFormPage/ButtonSettingForms.tsx @@ -0,0 +1,54 @@ +import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; +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 HideIcon from "@icons/questionsPage/hideIcon"; +import CopyIcon from "@icons/questionsPage/CopyIcon"; +import DeleteIcon from "@icons/questionsPage/deleteIcon"; +import SupplementIcon from "@icons/ContactFormIcon/supplementIcon"; + +interface Props { + switchState: string + SSHC: (data:string) => void +} + +export default function ButtonsOptions ({SSHC, switchState}:Props) { + const theme = useTheme(); + const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[ + {icon: , title: 'Настройки', value: 'setting'}, + {icon: , title: 'Ветвление', value: 'branching'}, + {icon: , title: 'Добавить шаг формы', value: 'supplement'}, + ] + + return ( + + + {buttonSetting.map( (e,i) => ( + {SSHC(e.value)}} + sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent', + color: switchState === e.value ? '#ffffff' : theme.palette.grey3.main, + }} + > + {e.icon} + {e.title} + + ))} + + + ) +} \ No newline at end of file diff --git a/src/pages/ContactFormPage/ContactFormPage.tsx b/src/pages/ContactFormPage/ContactFormPage.tsx new file mode 100644 index 00000000..e992a1e5 --- /dev/null +++ b/src/pages/ContactFormPage/ContactFormPage.tsx @@ -0,0 +1,109 @@ +import React from "react"; +import Stepper from '@ui_kit/Stepper'; +import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from '@mui/material'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import CustomTextField from "@ui_kit/CustomTextField"; +import OneIcon from "../../components/icons/questionsPage/OneIcon"; +import PointsIcon from "../../components/icons/questionsPage/PointsIcon"; +import AddPlus from "../../components/icons/questionsPage/addPlus"; +import ArrowLeft from "../../components/icons/questionsPage/arrowLeft"; +import InfoIcon from "@icons/InfoIcon"; + +export default function ContactFormPage() { + + + const [activeStep, setActiveStep] = React.useState(4); + + const handleNext = () => { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + }; + + const handleBack = () => { + setActiveStep((prevActiveStep) => prevActiveStep - 1); + }; + + const theme = useTheme(); + return ( + <> + + + Как собрать данные посетителя + + + + + + + + + + + + + Имя* + + E-mail* + + Телефон* + + + Добавить мессенджеры + + + + + {/**/} + {/**/} + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/ContactFormPage/Supplement.tsx b/src/pages/ContactFormPage/Supplement.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/ContactFormPage/settingForm.tsx b/src/pages/ContactFormPage/settingForm.tsx new file mode 100644 index 00000000..c3812170 --- /dev/null +++ b/src/pages/ContactFormPage/settingForm.tsx @@ -0,0 +1,17 @@ +import {Box, Typography} from "@mui/material"; +import CustomCheckbox from "@ui_kit/CustomCheckbox"; + +export default function SettingForm() { + return ( + + + Тип формы + + + + Настройки вопросов + + + + ); +}; \ No newline at end of file diff --git a/src/pages/ContactFormPage/switchContactForm.tsx b/src/pages/ContactFormPage/switchContactForm.tsx new file mode 100644 index 00000000..c4f0a4ea --- /dev/null +++ b/src/pages/ContactFormPage/switchContactForm.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + + + +interface Props { + switchState: string, +} + +export default function SwitchAnswerOptions({switchState = 'setting' }: Props) { + + switch (switchState) { + case 'setting': + // return (); + break; + case 'branching': + // return (); + break; + case 'supplement': + // return (); + break; + default: + return (<>) + } +} \ No newline at end of file diff --git a/src/ui_kit/CustomTextField.tsx b/src/ui_kit/CustomTextField.tsx index a76d155e..c2a32071 100755 --- a/src/ui_kit/CustomTextField.tsx +++ b/src/ui_kit/CustomTextField.tsx @@ -1,35 +1,43 @@ -import { FormControl, TextField, useTheme } from "@mui/material"; +import {FormControl, TextField, useTheme, SxProps, Theme} from "@mui/material"; interface CustomTextFieldProps { - placeholder: string; - text: string; + placeholder: string; + text: string; + sx?: SxProps; } -export default function CustomTextField({ placeholder, text }: CustomTextFieldProps) { - const theme = useTheme(); +export default function CustomTextField({ placeholder, text, sx}: CustomTextFieldProps) { + const theme = useTheme(); - return ( - - - - ); -} + return ( + + + + ); +} \ No newline at end of file diff --git a/src/utils/themes/generic.ts b/src/utils/themes/generic.ts index c6ea7932..4313fc4f 100755 --- a/src/utils/themes/generic.ts +++ b/src/utils/themes/generic.ts @@ -1,5 +1,11 @@ import { createTheme } from "@mui/material"; +declare module '@mui/material/Button' { + interface ButtonPropsVariantOverrides { + main: true; + outmain: true; + } +} const theme = createTheme({ breakpoints: { @@ -18,7 +24,40 @@ const theme = createTheme({ p1: "p", } }, - } + }, + MuiButton: { + variants: [ + { + props: { + variant: 'main' }, + style: { + backgroundColor: "#7E2AEA", + padding: '13px 20px', + borderRadius: '8px', + color: '#ffffff', + "&:hover": { + backgroundColor: "#581CA7" + } + + }, + }, + { + props: { + variant: 'outmain' }, + style: { + backgroundColor: "#F2F3F7", + padding: '10px 20px', + borderRadius: '8px', + border: '1px solid #9A9AAF', + color: '#9A9AAF', + "&:hover": { + backgroundColor: "#581CA7" + } + + }, + }, + ], + }, }, typography: { h5: { // H2 в макете diff --git a/src/utils/themes/light.ts b/src/utils/themes/light.ts index 7c4850ce..57d32d54 100755 --- a/src/utils/themes/light.ts +++ b/src/utils/themes/light.ts @@ -16,6 +16,7 @@ const lightTheme = createTheme({ primary: "#000000", secondary: "#7E2AEA", }, + background: { default: "#F2F3F7", }, @@ -40,6 +41,9 @@ const lightTheme = createTheme({ grey3: { main: "#4D4D4D", }, + grey4: { + main: "#333647", + }, orange: { main: "#FB5607", },