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

2023-04-11 21:29:38 +03:00 · 2023-04-11 21:29:38 +03:00 · ad6c955b07
commit ad6c955b07
parent 6c70b01cf8
12 changed files with 349 additions and 54 deletions
--- a/src/components/icons/ContactFormIcon/supplementIcon.tsx
+++ 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 (
+        <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>
+    );
+}
--- 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(
-  <React.StrictMode>
-    <ThemeProvider theme={lightTheme}>
-      <BrowserRouter>
+    <React.StrictMode>
+        <ThemeProvider theme={lightTheme}>
+    <BrowserRouter>
        <Routes>
-          <Route path="/" element={<Main />}>
-            <Route path="/start" element={<FirstQuiz />} />
-            <Route path="/create" element={<StartPage />} />
-            <Route path="/questions" element={<QuestionsPage />} />
-            <Route path="/result" element={<Result />} />
-            <Route path="/settings" element={<Setting />} />
+          <Route path="/" element={ <Main /> }>
+              <Route path="/start" element={<FirstQuiz/>} />
+              <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>
+
        </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/></>} />
--- 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"],
    }
--- a/src/pages/ContactFormPage/BranchingForm.tsx
+++ b/src/pages/ContactFormPage/BranchingForm.tsx
--- a/src/pages/ContactFormPage/ButtonSettingForms.tsx
+++ 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: <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>
+    )
+}
--- a/src/pages/ContactFormPage/ContactFormPage.tsx
+++ 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 (
+        <>
+            <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>
+        </>
+    )
+}
--- a/src/pages/ContactFormPage/Supplement.tsx
+++ b/src/pages/ContactFormPage/Supplement.tsx
--- a/src/pages/ContactFormPage/settingForm.tsx
+++ 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 (
+        <Box sx={{display: 'flex'}}>
+            <Box sx={{padding: '20px'}}>
+                <Typography>Тип формы</Typography>
+                <CustomCheckbox label={'Только мессенджеры'}/>
+            </Box>
+            <Box sx={{padding: '20px'}}>
+                <Typography>Настройки вопросов</Typography>
+                <CustomCheckbox label={'Текст мотивация'}/>
+            </Box>
+        </Box>
+    );
+};
--- a/src/pages/ContactFormPage/switchContactForm.tsx
+++ 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 (<ResponseSettings/>);
+            break;
+        case 'branching':
+            // return (<BranchingQuestions/>);
+            break;
+        case 'supplement':
+            // return (<UploadImage/>);
+            break;
+        default:
+            return (<></>)
+    }
+}
--- 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<Theme>;
 }

-export default function CustomTextField({ placeholder, text }: CustomTextFieldProps) {
-  const theme = useTheme();
+export default function CustomTextField({ placeholder, text, sx}: CustomTextFieldProps) {
+    const theme = useTheme();

-  return (
-    <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
-      <TextField
-        // value={text}
-        fullWidth
-        placeholder={placeholder}
-        sx={{
-          "& .MuiInputBase-root": {
-            backgroundColor: theme.palette.background.default,
-            height: "48px",
-            borderRadius: "10px",
-          },
-        }}
-        inputProps={{
-          sx: {
-            borderRadius: "10px",
-            fontSize: "18px",
-            lineHeight: "21px",
-            py: 0,
-          },
-        }}
-      />
-    </FormControl>
-  );
-}
+    return (
+        <FormControl
+            fullWidth
+            variant="standard"
+            sx={{ p: 0 }}
+        >
+            <TextField
+                // value={text}
+                fullWidth
+                placeholder={placeholder}
+                sx={{
+                    backgroundColor: theme.palette.background.default,
+                    "& .MuiInputBase-root": {
+                        height: "48px",
+                        borderRadius: "10px",
+
+                    },
+                    ...sx
+                }}
+                inputProps={{
+                    sx: {
+                        borderRadius: "10px",
+                        fontSize: "18px",
+                        lineHeight: "21px",
+                        py: 0,
+
+                    }
+                }}
+            />
+        </FormControl>
+    );
+}
--- 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 в макете
--- 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",
        },