311 lines
15 KiB
TypeScript
311 lines
15 KiB
TypeScript
|
import { Box, FormControl, Link, MenuItem, Select, TextField, Typography, useTheme } from "@mui/material";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import CustomCheckbox from "../CustomCheckbox";
|
|||
|
|
import AlignLeftIcon from "../icons/AlignLeftIcon";
|
|||
|
|
import AlignRightIcon from "../icons/AlignRightIcon";
|
|||
|
|
import ArrowDown from "../icons/ArrowDownIcon";
|
|||
|
|
import InfoIcon from "../icons/InfoIcon";
|
|||
|
|
import LayoutCenteredIcon from "../icons/LayoutCenteredIcon";
|
|||
|
|
import LayoutExpandedIcon from "../icons/LayoutExpandedIcon";
|
|||
|
|
import LayoutStandartIcon from "../icons/LayoutStandartIcon";
|
|||
|
|
import MobilePhoneIcon from "../icons/MobilePhoneIcon";
|
|||
|
|
import UploadIcon from "../icons/UploadIcon";
|
|||
|
|
import SelectableButton from "./SelectableButton";
|
|||
|
|
import SelectableIconButton from "./SelectableIconButton";
|
|||
|
|
import UploadBox from "./UploadBox";
|
|||
|
|
|
|||
|
|
|
|||
|
|
const designTypes = [
|
|||
|
|
["Standart", (color: string) => <LayoutStandartIcon color={color} />],
|
|||
|
|
["Expanded", (color: string) => <LayoutExpandedIcon color={color} />],
|
|||
|
|
["Centered", (color: string) => <LayoutCenteredIcon color={color} />]
|
|||
|
|
] as const;
|
|||
|
|
type DesignType = typeof designTypes[number][0];
|
|||
|
|
|
|||
|
|
type BackgroundType = "image" | "video";
|
|||
|
|
type AlignType = "left" | "right";
|
|||
|
|
|
|||
|
|
export default function StartPageSettings() {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const [designType, setDesignType] = useState<DesignType | "">(designTypes[0][0]);
|
|||
|
|
const [backgroundType, setBackgroundType] = useState<BackgroundType>("image");
|
|||
|
|
const [alignType, setAlignType] = useState<AlignType>("left");
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box sx={{
|
|||
|
|
backgroundColor: "white",
|
|||
|
|
borderRadius: "12px",
|
|||
|
|
p: "20px",
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "20px",
|
|||
|
|
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
|||
|
|
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
|||
|
|
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
|||
|
|
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
|||
|
|
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
|||
|
|
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
|
|||
|
|
}}>
|
|||
|
|
<Box sx={{
|
|||
|
|
pr: "20px",
|
|||
|
|
borderRight: `1px solid ${theme.palette.grey2.main}`,
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
flex: `1 1 365px`,
|
|||
|
|
}}>
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Дизайн</Typography>
|
|||
|
|
<FormControl
|
|||
|
|
fullWidth
|
|||
|
|
size="small"
|
|||
|
|
sx={{
|
|||
|
|
width: "100%",
|
|||
|
|
minWidth: "200px",
|
|||
|
|
height: "48px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Select
|
|||
|
|
id="category-select"
|
|||
|
|
variant="outlined"
|
|||
|
|
value={designType}
|
|||
|
|
displayEmpty
|
|||
|
|
onChange={e => setDesignType(e.target.value as DesignType)}
|
|||
|
|
sx={{
|
|||
|
|
height: "48px",
|
|||
|
|
borderRadius: "8px",
|
|||
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|||
|
|
border: `1px solid ${theme.palette.brightPurple.main} !important`,
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
MenuProps={{
|
|||
|
|
PaperProps: {
|
|||
|
|
sx: {
|
|||
|
|
mt: "8px",
|
|||
|
|
p: "4px",
|
|||
|
|
borderRadius: "8px",
|
|||
|
|
border: "1px solid #EEE4FC",
|
|||
|
|
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
MenuListProps: {
|
|||
|
|
sx: {
|
|||
|
|
py: 0,
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
gap: "8px",
|
|||
|
|
"& .Mui-selected": {
|
|||
|
|
backgroundColor: theme.palette.background.default,
|
|||
|
|
color: theme.palette.brightPurple.main,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
inputProps={{
|
|||
|
|
sx: {
|
|||
|
|
color: theme.palette.brightPurple.main,
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
px: "9px",
|
|||
|
|
gap: "20px",
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
IconComponent={props => <ArrowDown {...props} />}
|
|||
|
|
>
|
|||
|
|
{designTypes.map(type =>
|
|||
|
|
<MenuItem
|
|||
|
|
key={type[0]}
|
|||
|
|
value={type[0]}
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
gap: "20px",
|
|||
|
|
p: "4px",
|
|||
|
|
borderRadius: "5px",
|
|||
|
|
color: theme.palette.grey2.main,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
|
|||
|
|
{type[0]}
|
|||
|
|
</MenuItem>
|
|||
|
|
)}
|
|||
|
|
</Select>
|
|||
|
|
</FormControl>
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Фон</Typography>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "10px",
|
|||
|
|
}}>
|
|||
|
|
<SelectableButton isSelected={backgroundType === "image"} onClick={() => setBackgroundType("image")}>
|
|||
|
|
Изображение
|
|||
|
|
</SelectableButton>
|
|||
|
|
<SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
|
|||
|
|
Видео
|
|||
|
|
</SelectableButton>
|
|||
|
|
</Box>
|
|||
|
|
{backgroundType === "image" ?
|
|||
|
|
<>
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Изображение</Typography>
|
|||
|
|
<UploadBox icon={<UploadIcon />} text="5 MB максимум" />
|
|||
|
|
<Link sx={{
|
|||
|
|
mt: "20px",
|
|||
|
|
fontSize: "16px",
|
|||
|
|
lineHeight: "19px",
|
|||
|
|
color: theme.palette.orange.main,
|
|||
|
|
textDecorationColor: theme.palette.orange.main
|
|||
|
|
}}>Размер картинок</Link>
|
|||
|
|
<Box sx={{
|
|||
|
|
mt: "20px",
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "10px",
|
|||
|
|
alignItems: "center",
|
|||
|
|
|
|||
|
|
}}>
|
|||
|
|
<MobilePhoneIcon bgcolor="#EEE4FC" />
|
|||
|
|
<Link sx={{
|
|||
|
|
fontSize: "16px",
|
|||
|
|
lineHeight: "19px",
|
|||
|
|
color: theme.palette.brightPurple.main,
|
|||
|
|
textDecorationColor: theme.palette.brightPurple.main
|
|||
|
|
}}>мобильная версия</Link>
|
|||
|
|
</Box>
|
|||
|
|
</>
|
|||
|
|
:
|
|||
|
|
<>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
gap: "7px",
|
|||
|
|
mt: "20px",
|
|||
|
|
mb: "14px",
|
|||
|
|
}}>
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main }}>Добавить видео</Typography>
|
|||
|
|
<InfoIcon />
|
|||
|
|
</Box>
|
|||
|
|
<UploadBox
|
|||
|
|
icon={<UploadIcon />}
|
|||
|
|
sx={{
|
|||
|
|
height: "48px",
|
|||
|
|
width: "48px",
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>Настройки видео</Typography>
|
|||
|
|
<CustomCheckbox label="Зацикливать видео" />
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Изображение для мобильной версии</Typography>
|
|||
|
|
<UploadBox icon={<UploadIcon />} text="5 MB максимум" />
|
|||
|
|
</>
|
|||
|
|
}
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Расположение элементов</Typography>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "10px",
|
|||
|
|
}}>
|
|||
|
|
<SelectableIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={AlignLeftIcon} />
|
|||
|
|
<SelectableIconButton onClick={() => setAlignType("right")} isActive={alignType === "right"} Icon={AlignRightIcon} />
|
|||
|
|
</Box>
|
|||
|
|
{backgroundType === "image" &&
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px" }}>Логотип</Typography>
|
|||
|
|
}
|
|||
|
|
<UploadBox sx={{ mt: "20px" }} icon={<UploadIcon />} text="5 MB максимум" />
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Favicon</Typography>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "end",
|
|||
|
|
gap: "10px",
|
|||
|
|
}}>
|
|||
|
|
<UploadBox
|
|||
|
|
icon={<UploadIcon />}
|
|||
|
|
sx={{
|
|||
|
|
height: "48px",
|
|||
|
|
width: "48px",
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<Typography sx={{
|
|||
|
|
color: theme.palette.orange.main,
|
|||
|
|
fontSize: "16px",
|
|||
|
|
lineHeight: "19px",
|
|||
|
|
textDecoration: "underline",
|
|||
|
|
}}>5 MB максимум</Typography>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
flex: `1 1 795px`,
|
|||
|
|
}}>
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Заголовок</Typography>
|
|||
|
|
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography>
|
|||
|
|
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography>
|
|||
|
|
<CustomTextField placeholder="Начать" text={""} />
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography>
|
|||
|
|
<CustomTextField placeholder="+7 900 000 00 00" text={""} />
|
|||
|
|
<CustomCheckbox label="Кликабельный" />
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography>
|
|||
|
|
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography>
|
|||
|
|
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography>
|
|||
|
|
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
|||
|
|
<Link sx={{
|
|||
|
|
mt: "20px",
|
|||
|
|
fontSize: "16px",
|
|||
|
|
lineHeight: "19px",
|
|||
|
|
color: theme.palette.brightPurple.main,
|
|||
|
|
textDecorationColor: theme.palette.brightPurple.main
|
|||
|
|
}}>Дополнительно</Link>
|
|||
|
|
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography>
|
|||
|
|
<CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
|
|||
|
|
<Typography sx={{
|
|||
|
|
mt: "20px",
|
|||
|
|
fontSize: "16px",
|
|||
|
|
lineHeight: "19px",
|
|||
|
|
maxWidth: "80%",
|
|||
|
|
color: theme.palette.grey3.main,
|
|||
|
|
}}>
|
|||
|
|
Текст-заполнитель —
|
|||
|
|
это текст, который имеет Текст-заполнитель —
|
|||
|
|
это текст, который имеет Текст-заполнитель —
|
|||
|
|
это текст, который имеет Текст-заполнитель —
|
|||
|
|
это текст, который имеет Текст-заполнитель
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface CustomTextFieldProps {
|
|||
|
|
placeholder: string;
|
|||
|
|
text: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function CustomTextField({ placeholder, text }: CustomTextFieldProps) {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
|
|||
|
|
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",
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
inputProps={{
|
|||
|
|
sx: {
|
|||
|
|
borderRadius: "10px",
|
|||
|
|
fontSize: "18px",
|
|||
|
|
lineHeight: "21px",
|
|||
|
|
py: 0,
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</FormControl>
|
|||
|
|
);
|
|||
|
|
}
|