77 lines
4.3 KiB
TypeScript
77 lines
4.3 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('');
|
|||
|
|
// 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'}/>
|
|||
|
|
</>
|
|||
|
|
}
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|