Driwer для кнопок мессенджеры и поле ввода
This commit is contained in:
Tamara
parent
9225d9ff9f
commit
e6bebe9b5d
25
src/components/icons/ContactFormIcon/AddressIcon.tsx
Normal file
25
src/components/icons/ContactFormIcon/AddressIcon.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function AddressIcon({color}: Props) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 7.96875C8.53553 7.96875 9.375 7.12928 9.375 6.09375C9.375 5.05822 8.53553 4.21875 7.5 4.21875C6.46447 4.21875 5.625 5.05822 5.625 6.09375C5.625 7.12928 6.46447 7.96875 7.5 7.96875Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.1875 6.09375C12.1875 10.3125 7.5 13.5938 7.5 13.5938C7.5 13.5938 2.8125 10.3125 2.8125 6.09375C2.8125 4.85055 3.30636 3.65826 4.18544 2.77919C5.06451 1.90011 6.2568 1.40625 7.5 1.40625C8.7432 1.40625 9.93549 1.90011 10.8146 2.77919C11.6936 3.65826 12.1875 4.85055 12.1875 6.09375V6.09375Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
26
src/components/icons/ContactFormIcon/EmailIcon.tsx
Normal file
26
src/components/icons/ContactFormIcon/EmailIcon.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function EmailIcon({color}: Props) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.875 3.28125H13.125V11.25C13.125 11.3743 13.0756 11.4935 12.9877 11.5815C12.8998 11.6694 12.7806 11.7188 12.6562 11.7188H2.34375C2.21943 11.7188 2.1002 11.6694 2.01229 11.5815C1.92439 11.4935 1.875 11.3743 1.875 11.25V3.28125Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.125 3.28125L7.5 8.4375L1.875 3.28125" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
27
src/components/icons/ContactFormIcon/NameIcon.tsx
Normal file
27
src/components/icons/ContactFormIcon/NameIcon.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function NameIcon({color}: Props) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.5 8.375C8.57107 8.375 10.25 6.69607 10.25 4.625C10.25 2.55393 8.57107 0.875 6.5 0.875C4.42893 0.875 2.75 2.55393 2.75 4.625C2.75 6.69607 4.42893 8.375 6.5 8.375Z" stroke={color} stroke-miterlimit="10"/>
|
||||
<path d="M0.8125 11.6568C1.38844 10.659 2.21689 9.83044 3.21458 9.25436C4.21227 8.67828 5.34403 8.375 6.49609 8.375C7.64816 8.375 8.77992 8.67828 9.77761 9.25436C10.7753 9.83044 11.6037 10.659 12.1797 11.6568" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M0.765625 11.6914H11.9866" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
25
src/components/icons/ContactFormIcon/PhoneIcon.tsx
Normal file
25
src/components/icons/ContactFormIcon/PhoneIcon.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function PhoneIcon({color}: Props) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.41992 7.31237C5.90228 8.30847 6.70774 9.11187 7.70508 9.59166C7.77865 9.6265 7.86002 9.64157 7.94118 9.63541C8.02235 9.62925 8.10051 9.60205 8.16797 9.55651L9.63281 8.57799C9.69753 8.5341 9.77232 8.50731 9.85019 8.50014C9.92806 8.49297 10.0065 8.50564 10.0781 8.53698L12.8203 9.71471C12.914 9.75372 12.9923 9.82245 13.0432 9.91033C13.094 9.9982 13.1145 10.1004 13.1016 10.201C13.0146 10.8794 12.6835 11.5029 12.1702 11.9547C11.6568 12.4066 10.9964 12.656 10.3125 12.6561C8.19906 12.6561 6.17217 11.8166 4.67774 10.3221C3.18331 8.82769 2.34375 6.80081 2.34375 4.68737C2.3439 4.00346 2.59325 3.34304 3.04513 2.82968C3.49701 2.31633 4.12047 1.98522 4.79883 1.8983C4.89951 1.88537 5.00166 1.90589 5.08954 1.95671C5.17741 2.00754 5.24615 2.08583 5.28516 2.17955L6.46289 4.9276C6.49352 4.99812 6.50633 5.07508 6.5002 5.15172C6.49407 5.22835 6.46918 5.3023 6.42773 5.36705L5.44922 6.85534C5.40565 6.92265 5.38009 7.00001 5.37496 7.08003C5.36983 7.16005 5.38531 7.24004 5.41992 7.31237V7.31237Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
30
src/components/icons/ContactFormIcon/TextIcon.tsx
Normal file
30
src/components/icons/ContactFormIcon/TextIcon.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function TextIcon({color}: Props) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.67188 1.60156L8.67188 13.3838" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.6016 4.21875H13.7768C13.8534 4.21875 13.9268 4.26814 13.9809 4.35604C14.035 4.44395 14.0655 4.56318 14.0655 4.6875V10.3125C14.0655 10.4368 14.035 10.556 13.9809 10.644C13.9268 10.7319 13.8534 10.7812 13.7768 10.7812H10.6016" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.67081 10.7812H1.58194C1.41103 10.7812 1.24711 10.7319 1.12625 10.644C1.0054 10.556 0.9375 10.4368 0.9375 10.3125V4.6875C0.9375 4.56318 1.0054 4.44395 1.12625 4.35604C1.24711 4.26814 1.41103 4.21875 1.58194 4.21875H8.67081" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3.98438 6.5625H5.625" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.85156 1.60156H9.49219" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.85156 13.3828H9.49219" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.80469 6.5625V8.67188" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@ -1 +1,156 @@
|
||||
export {}
|
||||
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 {useState} from "react";
|
||||
|
||||
type LogicForm = "conditions" | "results";
|
||||
|
||||
export default function BranchingForm() {
|
||||
const theme = useTheme()
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
const [logicForm, setLogicForm] = useState<LogicForm>("conditions");
|
||||
const [display, setDisplay] = React.useState('1');
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
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>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={{position: 'absolute' as 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
maxWidth: '620px',
|
||||
width: '100%',
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: '12px',
|
||||
|
||||
boxShadow: 24,
|
||||
p: 0,}}>
|
||||
<Box
|
||||
sx={{display: 'flex',
|
||||
padding: '20px',
|
||||
borderRadius: '12px 12px 0 0',
|
||||
background: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<Typography>Условия показа формы</Typography>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
padding: '20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '30px'
|
||||
}}>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
gap: '20px',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
|
||||
<Typography sx={{color: theme.palette.grey2.main}}>Логика показа форм</Typography>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}>
|
||||
<SelectableButton isSelected={logicForm === "conditions"} onClick={() => setLogicForm("conditions")}>
|
||||
От условий
|
||||
</SelectableButton>
|
||||
<SelectableButton isSelected={logicForm === "results"} onClick={() => setLogicForm("results")}>
|
||||
С результатами
|
||||
</SelectableButton>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'baseline',
|
||||
}}>
|
||||
{logicForm === 'conditions' ?
|
||||
|
||||
<>
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
sx={{color: theme.palette.brightPurple.main}}
|
||||
// onClick={() => {
|
||||
// }}
|
||||
>
|
||||
Добавить условие
|
||||
</Link>
|
||||
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||||
name="controlled-radio-buttons-group"
|
||||
value={value}
|
||||
onChange={handleChangeRadio}
|
||||
>
|
||||
<FormControlLabel sx={{color: theme.palette.grey2.main}} value="1" control={<Radio />} label="Все условия обязательны" />
|
||||
<FormControlLabel sx={{color: theme.palette.grey2.main}} value="2" control={<Radio />} label="Обязательно хотя бы одно условие" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<Typography>У вас пока что нет результатов.</Typography>
|
||||
<Button>Добавить</Button>
|
||||
</>
|
||||
}
|
||||
|
||||
</Box>
|
||||
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
|
||||
<CustomButton
|
||||
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",
|
||||
}}
|
||||
>Готово</CustomButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,12 +1,8 @@
|
||||
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 {Box, useTheme} from "@mui/material";
|
||||
import SupplementIcon from "@icons/ContactFormIcon/supplementIcon";
|
||||
|
||||
interface Props {
|
||||
@ -14,7 +10,7 @@ interface Props {
|
||||
SSHC: (data:string) => void
|
||||
}
|
||||
|
||||
export default function ButtonsOptions ({SSHC, switchState}:Props) {
|
||||
export default function ButtonSettingForms ({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'},
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
import React from "react";
|
||||
import Stepper from '@ui_kit/Stepper';
|
||||
import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from '@mui/material';
|
||||
import {Box, Button, IconButton, Typography, Paper, useTheme, Link, SxProps, Theme, TextField} 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";
|
||||
import ButtonSettingForms from "./ButtonSettingForms";
|
||||
import SwitchContactForm from "./switchContactForm";
|
||||
import DrawerNewField from "./DrawerParent";
|
||||
import WindowNewField from "./NewField/WindowNewField";
|
||||
import WindowMessengers from "./Massengers/WindowMessengers";
|
||||
|
||||
export default function ContactFormPage() {
|
||||
|
||||
@ -34,7 +38,92 @@ export default function ContactFormPage() {
|
||||
textDecorationColor: theme.palette.brightPurple.main
|
||||
}}>Как собрать данные посетителя</Link> <InfoIcon/>
|
||||
</Box>
|
||||
<Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0', display: 'flex',}}>
|
||||
<ContactFormParent>
|
||||
<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={""} />
|
||||
<DrawerNewField><WindowNewField/></DrawerNewField>
|
||||
<DrawerNewField>
|
||||
{/* <Link sx={{*/}
|
||||
{/* mt: "20px",*/}
|
||||
{/* fontSize: "16px",*/}
|
||||
{/* lineHeight: "19px",*/}
|
||||
{/* color: theme.palette.brightPurple.main,*/}
|
||||
{/* textDecorationColor: theme.palette.brightPurple.main*/}
|
||||
{/*}}>Добавить мессенджеры</Link>*/}
|
||||
<WindowMessengers/>
|
||||
</DrawerNewField>
|
||||
|
||||
<Button variant='contained' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
|
||||
Название кнопки
|
||||
</Button>
|
||||
|
||||
</Box>
|
||||
</ContactFormParent>
|
||||
|
||||
|
||||
<ContactFormParent>
|
||||
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'end'}}>
|
||||
<OneIcon/>
|
||||
<IconButton> <ExpandMoreIcon /> </IconButton>
|
||||
</Box>
|
||||
<Button variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
|
||||
Добавить поле +
|
||||
</Button>
|
||||
<Box sx={{display: 'flex'}}>
|
||||
<Typography sx={{color: theme.palette.orange.main}}>Будут показаны поля по умолчанию</Typography>
|
||||
<InfoIcon/>
|
||||
</Box>
|
||||
<Link sx={{
|
||||
mt: "20px",
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
color: theme.palette.brightPurple.main,
|
||||
textDecorationColor: theme.palette.brightPurple.main
|
||||
}}>Добавить мессенджеры</Link>
|
||||
<Button variant='contained' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
|
||||
Название кнопки
|
||||
</Button>
|
||||
</ContactFormParent>
|
||||
<Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>
|
||||
<IconButton>
|
||||
<AddPlus/>
|
||||
</IconButton>
|
||||
<Box sx={{display: 'flex', gap: '8px'}}>
|
||||
<Button variant='outlined'>
|
||||
<ArrowLeft/>
|
||||
</Button>
|
||||
<Button variant='contained' sx={{padding: '10px 20px'}}>
|
||||
Установка квиза
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
interface Props {
|
||||
outerContainerSx?: SxProps<Theme>;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
function ContactFormParent({outerContainerSx: sx, children }: Props) {
|
||||
const theme = useTheme();
|
||||
const [switchState, setSwitchState] = React.useState('setting');
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data)
|
||||
}
|
||||
return(
|
||||
<Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0', display: 'flex', flexDirection: 'column'}}>
|
||||
<Box sx={{width: '100%', display: 'flex'}} >
|
||||
<Box
|
||||
sx={{
|
||||
borderRight: `1px solid ${theme.palette.grey2.main}`,
|
||||
@ -46,64 +135,30 @@ export default function ContactFormPage() {
|
||||
gap: '20px'
|
||||
}}>
|
||||
<CustomTextField placeholder="Заголовок формы" text={""}/>
|
||||
<CustomTextField placeholder="Дополнительный текст формы" text={""}
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
minHeight: '287px',
|
||||
alignItems: 'start',
|
||||
},
|
||||
}} />
|
||||
<TextField
|
||||
id="outlined-multiline-static"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder="Дополнительный текст формы"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
|
||||
"& .MuiInputBase-root": {
|
||||
borderRadius: "10px",
|
||||
alignItems: 'start',
|
||||
color: theme.palette.grey2.main,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</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 sx={{display: 'flex', flexDirection: 'column', padding: '20px', width: '100%', gap: '20px'}}>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
<Box>
|
||||
<ButtonSettingForms switchState={switchState} SSHC={SSHC}/>
|
||||
<SwitchContactForm switchState={switchState}/>
|
||||
</Box>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
43
src/pages/ContactFormPage/DrawerParent.tsx
Normal file
43
src/pages/ContactFormPage/DrawerParent.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Drawer from '@mui/material/Drawer';
|
||||
import Button from '@mui/material/Button';
|
||||
import {SxProps, Theme} from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
outerContainerSx?: SxProps<Theme>;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function DrawerNewField({outerContainerSx: sx, children }: Props) {
|
||||
const [state, setState] = React.useState({
|
||||
right: false,
|
||||
});
|
||||
|
||||
const toggleDrawer =
|
||||
(anchor: 'right', open: boolean) =>
|
||||
() => {
|
||||
setState({ ...state, 'right' : open });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={toggleDrawer("right", true)} variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
|
||||
Добавить поле +
|
||||
</Button>
|
||||
<Drawer
|
||||
anchor='right'
|
||||
open={state['right']}
|
||||
onClose={toggleDrawer("right", false)}
|
||||
>
|
||||
<Box
|
||||
sx={{ width: 450 }}
|
||||
role="presentation"
|
||||
>
|
||||
|
||||
{children}
|
||||
</Box>
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
66
src/pages/ContactFormPage/Massengers/WindowMessengers.tsx
Normal file
66
src/pages/ContactFormPage/Massengers/WindowMessengers.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
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 {useState} from "react";
|
||||
import SelectMask from "../SelectMask";
|
||||
|
||||
type SelectMessenger = 'contact'| 'bot';
|
||||
export default function WindowMessengers() {
|
||||
const theme = useTheme();
|
||||
const [selectMessenger, setSelectMessenger] = useState<SelectMessenger>("contact");
|
||||
return(
|
||||
<>
|
||||
<Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', background: theme.palette.background.default}}>
|
||||
<Typography>Настройки мессенджеров</Typography>
|
||||
<Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
|
||||
</Box>
|
||||
<Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
|
||||
<Typography>Заголовок страницы мессенджеров</Typography>
|
||||
<CustomTextField placeholder={'Куда присылать результаты'}/>
|
||||
<Typography>Текст на кнопке</Typography>
|
||||
<CustomTextField placeholder={'Готово'}/>
|
||||
<CustomCheckbox label={'Спрашивать имя'}/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
padding: '0 20px'
|
||||
}}>
|
||||
<SelectableButton isSelected={selectMessenger === "contact"} onClick={() => setSelectMessenger("contact")}>
|
||||
Запрашивать контакт
|
||||
</SelectableButton>
|
||||
<SelectableButton isSelected={selectMessenger === "bot"} onClick={() => setSelectMessenger("bot")}>
|
||||
Чат-бот
|
||||
</SelectableButton>
|
||||
</Box>
|
||||
{selectMessenger === 'contact' ?
|
||||
<>
|
||||
<Box sx={{padding: '20px', display: 'flex'}}>
|
||||
<Box>
|
||||
|
||||
<CustomCheckbox label={'Telegram'}/>
|
||||
<CustomCheckbox label={'WhatsApp'}/>
|
||||
<CustomCheckbox label={'Skype'}/>
|
||||
</Box>
|
||||
<Box>
|
||||
<CustomCheckbox label={'Viber'}/>
|
||||
<CustomCheckbox label={'VKontakte'}/>
|
||||
<CustomCheckbox label={'Телефон'}/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
|
||||
<SelectMask/>
|
||||
</Box>
|
||||
|
||||
</>
|
||||
:
|
||||
<></>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
56
src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
Normal file
56
src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
|
||||
import React from "react";
|
||||
import SettingIcon from "@icons/questionsPage/settingIcon";
|
||||
import Branching from "@icons/questionsPage/branching";
|
||||
import {Box, IconButton, useTheme} from "@mui/material";
|
||||
import SupplementIcon from "@icons/ContactFormIcon/supplementIcon";
|
||||
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
|
||||
SSHC: (data:string) => void
|
||||
}
|
||||
|
||||
export default function ButtonsNewField ({SSHC, switchState}:Props) {
|
||||
const theme = useTheme();
|
||||
const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
|
||||
{icon: <NameIcon color={switchState === 'name' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Имя', value: 'name'},
|
||||
{icon: <EmailIcon color={switchState === 'email' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Email', value: 'email'},
|
||||
{icon: <PhoneIcon color={switchState === 'phone' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Телефон', value: 'phone'},
|
||||
{icon: <TextIcon color={switchState === 'text' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Текст', value: 'text'},
|
||||
{icon: <AddressIcon color={switchState === 'address' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Адрес', value: 'address'},
|
||||
]
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
}}>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
61
src/pages/ContactFormPage/NewField/NewFieldParent.tsx
Normal file
61
src/pages/ContactFormPage/NewField/NewFieldParent.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import {FormControl, SxProps, TextField, Theme, Typography} from "@mui/material";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import Button from "@mui/material/Button";
|
||||
import * as React from "react";
|
||||
|
||||
interface Props {
|
||||
outerContainerSx?: SxProps<Theme>;
|
||||
children?: React.ReactNode;
|
||||
defaultValue?: string;
|
||||
placeholderHelp: string;
|
||||
placeholderField: string;
|
||||
}
|
||||
|
||||
export default function NewFieldParent ({defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children}: Props) {
|
||||
return(
|
||||
<Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
|
||||
<Typography>Подсказка</Typography>
|
||||
<CustomTextField placeholder={placeholderHelp} text={''}/>
|
||||
</Box>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
|
||||
<Typography>Подсказка внутри поля</Typography>
|
||||
<CustomTextField placeholder={placeholderField} text={''}/>
|
||||
</Box>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
|
||||
<Typography>Ключ</Typography>
|
||||
<FormControl
|
||||
fullWidth
|
||||
variant="standard"
|
||||
sx={{ p: 0, border: 0 }}
|
||||
>
|
||||
<TextField
|
||||
disabled
|
||||
id="outlined-disabled"
|
||||
defaultValue={defaultValue}
|
||||
sx={{
|
||||
"& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
|
||||
border: 'none'
|
||||
},
|
||||
"& .MuiInputBase-root": {
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: '#EEE4FC',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<CustomCheckbox label={"Обязательно к заполнению"}/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography>Запрашивать на</Typography>
|
||||
<CustomCheckbox label={'Шаг 1'}/>
|
||||
<CustomCheckbox label={'Шаг 2'}/>
|
||||
</Box>
|
||||
{children}
|
||||
<Button variant='contained' sx={{maxWidth: '125px'}}>Добавить</Button>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
48
src/pages/ContactFormPage/NewField/SwitchNewField.tsx
Normal file
48
src/pages/ContactFormPage/NewField/SwitchNewField.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import * as React from 'react';
|
||||
import NewFieldParent from "./NewFieldParent";
|
||||
import {FormControlLabel, Switch} from "@mui/material";
|
||||
import SelectMask from "../SelectMask";
|
||||
|
||||
|
||||
|
||||
interface Props {
|
||||
switchState: string,
|
||||
}
|
||||
|
||||
|
||||
export default function SwitchNewField({switchState ='name'}: Props) {
|
||||
switch (switchState) {
|
||||
case 'name':
|
||||
return (<NewFieldParent placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
|
||||
break;
|
||||
case 'email':
|
||||
return (<NewFieldParent placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'}/>);
|
||||
break;
|
||||
case 'phone':
|
||||
|
||||
return (
|
||||
<NewFieldParent placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
|
||||
<FormControlLabel
|
||||
value="start"
|
||||
control={<Switch color="primary" />}
|
||||
label="Маска для телефона"
|
||||
labelPlacement="start"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between'
|
||||
}}
|
||||
/>
|
||||
<SelectMask/>
|
||||
</NewFieldParent>
|
||||
);
|
||||
break;
|
||||
case 'text':
|
||||
return (<NewFieldParent placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'}/>);
|
||||
break;
|
||||
case 'address':
|
||||
return (<NewFieldParent placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'}/>);
|
||||
break;
|
||||
default:
|
||||
return (<></>)
|
||||
}
|
||||
}
|
||||
30
src/pages/ContactFormPage/NewField/WindowNewField.tsx
Normal file
30
src/pages/ContactFormPage/NewField/WindowNewField.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
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() {
|
||||
const theme = useTheme();
|
||||
const [switchState, setSwitchState] = React.useState('setting');
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data)
|
||||
}
|
||||
|
||||
|
||||
return(
|
||||
<>
|
||||
<Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', background: theme.palette.background.default}}>
|
||||
<Typography>Новое поле</Typography>
|
||||
<Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
|
||||
</Box>
|
||||
|
||||
<Box><ButtonsNewField switchState={switchState} SSHC={SSHC}/></Box>
|
||||
<SwitchNewField switchState={switchState}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
76
src/pages/ContactFormPage/SelectMask.tsx
Normal file
76
src/pages/ContactFormPage/SelectMask.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import {Box, Link, Typography, useTheme} from "@mui/material";
|
||||
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import * as React from "react";
|
||||
import {useState} from "react";
|
||||
|
||||
type SelectMask = 'country'| 'mymask';
|
||||
export default function SelectMask () {
|
||||
|
||||
// const [State, setState] = React.useState('');
|
||||
// const StateHC = (data: string) => {
|
||||
// setState(data)
|
||||
// }
|
||||
|
||||
const theme = useTheme()
|
||||
const [selectMask, setSelectMask] = useState<SelectMask>("country");
|
||||
return(
|
||||
<>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}>
|
||||
<SelectableButton isSelected={selectMask === "country"} onClick={() => setSelectMask("country")}>
|
||||
Выбор страны
|
||||
</SelectableButton>
|
||||
<SelectableButton isSelected={selectMask === "mymask"} onClick={() => setSelectMask("mymask")}>
|
||||
Своя маска
|
||||
</SelectableButton>
|
||||
</Box>
|
||||
{selectMask === 'country' ?
|
||||
<>
|
||||
<Typography>
|
||||
Посетителю нужно будет выбрать страну
|
||||
и ввести номер телефона. Страна определяется автоматически в зависимости от настроек браузера
|
||||
</Typography>
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
sx={{color: theme.palette.brightPurple.main, textAlign: 'left'}}
|
||||
// onClick={() => {
|
||||
// StateHC()
|
||||
// }}
|
||||
>
|
||||
Расширенные настройки
|
||||
</Link>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
|
||||
<Typography>Страна по умолчанию</Typography>
|
||||
<CustomTextField placeholder={'Введите страну на английском языке'}/>
|
||||
<Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Если ничего не выбрано, страна будет выбрана автоматически</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
|
||||
<Typography>Выделенные страны</Typography>
|
||||
<CustomTextField placeholder={'Введите страну на английском языке'}/>
|
||||
<Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут показываться вверху списка</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
|
||||
<Typography>Показываемые страны</Typography>
|
||||
<CustomTextField placeholder={'Введите страну на английском языке'}/>
|
||||
<Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Будут показываться только выбранные страны</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
|
||||
<Typography>Игнорируемые страны</Typography>
|
||||
<CustomTextField placeholder={'Введите страну на английском языке'}/>
|
||||
<Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут не будут показываться в списке</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<CustomTextField placeholder={''} text={'+7 900 000 00 00'}/>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,4 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import SettingForm from "./settingForm";
|
||||
import BranchingForm from "./BranchingForm";
|
||||
|
||||
|
||||
|
||||
@ -6,17 +8,17 @@ interface Props {
|
||||
switchState: string,
|
||||
}
|
||||
|
||||
export default function SwitchAnswerOptions({switchState = 'setting' }: Props) {
|
||||
export default function SwitchContactForm({switchState = 'setting' }: Props) {
|
||||
|
||||
switch (switchState) {
|
||||
case 'setting':
|
||||
// return (<ResponseSettings/>);
|
||||
return (<SettingForm/>);
|
||||
break;
|
||||
case 'branching':
|
||||
// return (<BranchingQuestions/>);
|
||||
return (<BranchingForm/>);
|
||||
break;
|
||||
case 'supplement':
|
||||
// return (<UploadImage/>);
|
||||
return (<></>);
|
||||
break;
|
||||
default:
|
||||
return (<></>)
|
||||
|
||||
@ -1,66 +1,55 @@
|
||||
import { Box, Typography, Link, useTheme } from "@mui/material";
|
||||
import {Box, Typography, Link, useTheme} from "@mui/material";
|
||||
import React from "react";
|
||||
import EnterIcon from "../../../components/icons/questionsPage/enterIcon";
|
||||
import SwitchAnswerOptions from "./switchAnswerOptions";
|
||||
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
|
||||
|
||||
export default function AnswerOptions() {
|
||||
const theme = useTheme();
|
||||
const [switchState, setSwitchState] = React.useState("setting");
|
||||
// const [addInput, setAddInput] = React.useState([
|
||||
// 0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]};
|
||||
// ]);
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data);
|
||||
};
|
||||
|
||||
// const createCondition = (name) => {
|
||||
// addInput([...state, {name: name}])
|
||||
// }
|
||||
//
|
||||
// const deleteCondition = (index) => {
|
||||
//
|
||||
// }
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
padding: "0 0 33px 80px",
|
||||
fontWeight: 400,
|
||||
fontSize: "18px",
|
||||
lineHeight: "21.33px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Добавьте ответ
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
sx={{ color: theme.palette.brightPurple.main }}
|
||||
// onClick={() => {
|
||||
// console.info("I'm a button.");
|
||||
// }}
|
||||
>
|
||||
Добавьте ответ
|
||||
</Link>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: "18px",
|
||||
lineHeight: "21.33px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
или нажмите Enter
|
||||
</Typography>
|
||||
<EnterIcon />
|
||||
</Box>
|
||||
</Box>
|
||||
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} />
|
||||
<SwitchAnswerOptions switchState={switchState} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default function AnswerOptions() {
|
||||
const theme = useTheme();
|
||||
const [switchState, setSwitchState] = React.useState('setting');
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ padding: '20px'}}>
|
||||
<Typography
|
||||
sx={{
|
||||
padding: '0 0 33px 80px',
|
||||
fontWeight: 400,
|
||||
fontSize: '18px',
|
||||
lineHeight: '21.33px',
|
||||
color: theme.palette.grey2.main
|
||||
}}
|
||||
>
|
||||
Добавьте ответ
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
sx={{color: theme.palette.brightPurple.main}}
|
||||
// onClick={() => {
|
||||
// console.info("I'm a button.");
|
||||
// }}
|
||||
>
|
||||
Добавьте ответ
|
||||
</Link>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: '18px',
|
||||
lineHeight: '21.33px',
|
||||
color: theme.palette.grey2.main
|
||||
}}
|
||||
>или нажмите Enter</Typography>
|
||||
<EnterIcon/>
|
||||
</Box>
|
||||
</Box>
|
||||
<ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC}/>
|
||||
<SwitchAnswerOptions switchState={switchState}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -50,11 +50,11 @@ function CheckedIcon() {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
border: `1px solid ${theme.palette.grey2.main}`,
|
||||
}}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 18" fill="none">
|
||||
<path d="M2 9L10 16.5L22.5 1.5" stroke={theme.palette.grey3.main} strokeWidth="4" strokeLinecap="round" />
|
||||
<path d="M2 9L10 16.5L22.5 1.5" stroke='#ffffff' strokeWidth="4" strokeLinecap="round" />
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -2,7 +2,7 @@ import {FormControl, TextField, useTheme, SxProps, Theme} from "@mui/material";
|
||||
|
||||
interface CustomTextFieldProps {
|
||||
placeholder: string;
|
||||
text: string;
|
||||
text?: string;
|
||||
sx?: SxProps<Theme>;
|
||||
}
|
||||
|
||||
@ -16,12 +16,12 @@ export default function CustomTextField({ placeholder, text, sx}: CustomTextFiel
|
||||
sx={{ p: 0 }}
|
||||
>
|
||||
<TextField
|
||||
// value={text}
|
||||
value={text}
|
||||
fullWidth
|
||||
placeholder={placeholder}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ const theme = createTheme({
|
||||
variants: [
|
||||
{
|
||||
props: {
|
||||
variant: 'main' },
|
||||
variant: 'contained' },
|
||||
style: {
|
||||
backgroundColor: "#7E2AEA",
|
||||
padding: '13px 20px',
|
||||
@ -43,7 +43,7 @@ const theme = createTheme({
|
||||
},
|
||||
{
|
||||
props: {
|
||||
variant: 'outmain' },
|
||||
variant: 'outlined' },
|
||||
style: {
|
||||
backgroundColor: "#F2F3F7",
|
||||
padding: '10px 20px',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user