82 lines
4.5 KiB
TypeScript
82 lines
4.5 KiB
TypeScript
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(false);
|
||
const StateHC = (bool:boolean) => {
|
||
setState(bool)
|
||
}
|
||
|
||
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(!State)
|
||
}}
|
||
>
|
||
Расширенные настройки
|
||
</Link>
|
||
{State ?
|
||
<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'}/>
|
||
</>
|
||
}
|
||
</>
|
||
)
|
||
}
|