112 lines
4.3 KiB
TypeScript
112 lines
4.3 KiB
TypeScript
import { Box, Link, Typography, useTheme } from "@mui/material";
|
||
import SelectableButton from "@ui_kit/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"} />
|
||
</>
|
||
)}
|
||
</>
|
||
);
|
||
}
|