работа над страницей форма контактов

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 (
+        <Box
+            sx={{
+                // height: "38px",
+                // width: "45px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }}
+        >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.00781 4.04129V9.99117M10.0548 7H4.00202M7.00781 13C3.6941 13 1.00781 10.3137 1.00781 7C1.00781 3.68629 3.6941 1 7.00781 1C10.3215 1 13.0078 3.68629 13.0078 7C13.0078 10.3137 10.3215 13 7.00781 13Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+
+        </Box>
+    );
+}

src/index.tsx

@@ -1,43 +1,56 @@
-import React from "react";
+import React from 'react';
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import ReactDOM from 'react-dom/client';
-import ReactDOM from "react-dom/client";
+import './index.css';
-import { ThemeProvider } from "@mui/material";
+import App from './App';
-
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { Setting } from "./pages/Setting";
+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";
+const root = ReactDOM.createRoot(
-
+    document.getElementById('root') as HTMLElement
-import "./index.css";
+);
-
-const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(
-  <React.StrictMode>
+    <React.StrictMode>
-    <ThemeProvider theme={lightTheme}>
+        <ThemeProvider theme={lightTheme}>
-      <BrowserRouter>
+    <BrowserRouter>
         <Routes>
-          <Route path="/" element={<Main />}>
+          <Route path="/" element={ <Main /> }>
-            <Route path="/start" element={<FirstQuiz />} />
+              <Route path="/start" element={<FirstQuiz/>} />
-            <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='/contacts' element={<ContactFormPage/>} />
-            <Route path="/settings" element={<Setting />} />
+              <Route path="/result" element={<Result />} />
+              <Route path="/settings" element={<Setting />} />
           </Route>
+
         </Routes>
-      </BrowserRouter>
+    </BrowserRouter>
     </ThemeProvider>
   </React.StrictMode>
 );
 
+
+
 // <Route path="/quizes" element={<Quizes/>}/>
 // <Route path="/projects" element={<Projects/>}  />
 // <Route path="/gallery" element={<Gallery/>} />
 // <Route path="/create/quiz" element={<><NavbarCreateQuiz /></>} />
 // <Route path="/create/start" element={<><NavbarCreateQuiz /></>} />
 // <Route path="/create/settings" element={<><NavbarCreateQuiz /><CreateQuiz /></>} />
-// <Route path="/create/stepper" element={<><NavbarCreateQuiz /><HorizontalLinearStepper/></>} />
+// <Route path="/create/stepper" element={<><NavbarCreateQuiz /><HorizontalLinearStepper/></>} />

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"],
     }

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: <SettingIcon color={switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Настройки', value: 'setting'},
+        {icon: <Branching color={switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Ветвление', value: 'branching'},
+        {icon: <SupplementIcon color={switchState === 'supplement' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Добавить шаг формы', value: 'supplement'},
+    ]
+
+    return (
+        <Box sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            width: '100%',
+            background: '#f2f3f7'
+        }}>
+            <Box
+                sx={{
+                    padding: '20px',
+                    display: 'flex',
+                    gap: '10px'
+                }}
+            >
+                {buttonSetting.map( (e,i) => (
+                    <MiniButtonSetting
+                        key={i}
+                        onClick={()=>{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}
+                    </MiniButtonSetting>
+                ))}
+            </Box>
+        </Box>
+    )
+}

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 (
+        <>
+            <Stepper activeStep={activeStep} desc={"Настройте форму контактов"}/>
+            <Box sx={{display: 'flex', alignItems: 'center', gap: '10px'}}>
+                <Link sx={{
+                    fontSize: "16px",
+                    lineHeight: "19px",
+                    color: theme.palette.brightPurple.main,
+                    textDecorationColor: theme.palette.brightPurple.main
+                }}>Как собрать данные посетителя</Link> <InfoIcon/>
+            </Box>
+            <Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0', display: 'flex',}}>
+                <Box
+                    sx={{
+                        borderRight: `1px solid ${theme.palette.grey2.main}`,
+                        maxWidth: '386px',
+                        width: '100%',
+                        padding: '113px 20px 20px 20px',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '20px'
+                    }}>
+                    <CustomTextField placeholder="Заголовок формы" text={""}/>
+                    <CustomTextField placeholder="Дополнительный текст формы" text={""}
+                                     sx={{
+                                         "& .MuiInputBase-root": {
+                                             height: "48px",
+                                             borderRadius: "10px",
+                                             minHeight: '287px',
+                                             alignItems: 'start',
+                                         },
+                                     }} />
+                </Box>
+                <Box sx={{display: 'flex', flexDirection: 'column', padding: '20px', width: '100%'}}>
+                    <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'end'}}>
+                        <OneIcon/>
+                        <IconButton> <ExpandMoreIcon /> </IconButton>
+                    </Box>
+                    <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px', padding: '10px 20px'}}>
+                        <Typography>Имя*</Typography>
+                        <CustomTextField placeholder="Дмитрий" text={""} />
+                        <Typography>E-mail*</Typography>
+                        <CustomTextField placeholder="+7 900 000 00 00" text={""} />
+                        <Typography>Телефон*</Typography>
+                        <CustomTextField placeholder="+7 900 000 00 00" text={""} />
+                        <Button variant='main' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
+                            Добавить поле +
+                        </Button>
+                        <Link sx={{
+                            mt: "20px",
+                            fontSize: "16px",
+                            lineHeight: "19px",
+                            color: theme.palette.brightPurple.main,
+                            textDecorationColor: theme.palette.brightPurple.main
+                        }}>Добавить мессенджеры</Link>
+                        <Button variant='main' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
+                            Название кнопки
+                        </Button>
+                    </Box>
+                </Box>
+
+                {/*<Box*/}
+                {/*    sx={{width: '100%', maxWidth: "760px", display: 'flex', alignItems: 'center', gap: '10px', padding: '20px' }}*/}
+                {/*>*/}
+                {/*</Box>*/}
+
+
+            </Paper>
+            <Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>
+                <IconButton>
+                    <AddPlus/>
+                </IconButton>
+                <Box sx={{display: 'flex', gap: '8px'}}>
+                    <Button variant='outmain'>
+                        <ArrowLeft/>
+                    </Button>
+                    <Button variant='main' sx={{padding: '10px 20px'}}>
+                        Установка квиза
+                    </Button>
+                </Box>
+            </Box>
+        </>
+    )
+}

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 (
+        <Box sx={{display: 'flex'}}>
+            <Box sx={{padding: '20px'}}>
+                <Typography>Тип формы</Typography>
+                <CustomCheckbox label={'Только мессенджеры'}/>
+            </Box>
+            <Box sx={{padding: '20px'}}>
+                <Typography>Настройки вопросов</Typography>
+                <CustomCheckbox label={'Текст мотивация'}/>
+            </Box>
+        </Box>
+    );
+};

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 (<ResponseSettings/>);
+            break;
+        case 'branching':
+            // return (<BranchingQuestions/>);
+            break;
+        case 'supplement':
+            // return (<UploadImage/>);
+            break;
+        default:
+            return (<></>)
+    }
+}

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;
+    placeholder: string;
-  text: string;
+    text: string;
+    sx?: SxProps<Theme>;
 }
 
-export default function CustomTextField({ placeholder, text }: CustomTextFieldProps) {
+export default function CustomTextField({ placeholder, text, sx}: CustomTextFieldProps) {
-  const theme = useTheme();
+    const theme = useTheme();
 
-  return (
+    return (
-    <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
+        <FormControl
-      <TextField
+            fullWidth
-        // value={text}
+            variant="standard"
-        fullWidth
+            sx={{ p: 0 }}
-        placeholder={placeholder}
+        >
-        sx={{
+            <TextField
-          "& .MuiInputBase-root": {
+                // value={text}
-            backgroundColor: theme.palette.background.default,
+                fullWidth
-            height: "48px",
+                placeholder={placeholder}
-            borderRadius: "10px",
+                sx={{
-          },
+                    backgroundColor: theme.palette.background.default,
-        }}
+                    "& .MuiInputBase-root": {
-        inputProps={{
+                        height: "48px",
-          sx: {
+                        borderRadius: "10px",
-            borderRadius: "10px",
+
-            fontSize: "18px",
+                    },
-            lineHeight: "21px",
+                    ...sx
-            py: 0,
+                }}
-          },
+                inputProps={{
-        }}
+                    sx: {
-      />
+                        borderRadius: "10px",
-    </FormControl>
+                        fontSize: "18px",
-  );
+                        lineHeight: "21px",
-}
+                        py: 0,
+
+                    }
+                }}
+            />
+        </FormControl>
+    );
+}

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 в макете

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",
         },