91 lines
4.0 KiB
TypeScript
91 lines
4.0 KiB
TypeScript
|
import {Box, Typography, useTheme} from "@mui/material";
|
|||
|
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
|||
|
|
import InfoIcon from "@icons/InfoIcon";
|
|||
|
|
import {useState} from "react";
|
|||
|
|
import FormatIcon2 from "@icons/questionsPage/FormatIcon2";
|
|||
|
|
import FormatIcon1 from "@icons/questionsPage/FormatIcon1";
|
|||
|
|
import CustomButton from "../../../components/CustomButton";
|
|||
|
|
import ProportionsIcon11 from "@icons/questionsPage/ProportionsIcon11";
|
|||
|
|
import ProportionsIcon21 from "@icons/questionsPage/ProportionsIcon21";
|
|||
|
|
import ProportionsIcon12 from "@icons/questionsPage/ProportionsIcon12";
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
Icon: React.ElementType;
|
|||
|
|
isActive?: boolean;
|
|||
|
|
onClick: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
return (
|
|||
|
|
<CustomButton
|
|||
|
|
onClick={onClick}
|
|||
|
|
variant="outlined"
|
|||
|
|
startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: isActive ? theme.palette.brightPurple.main : '#eee4fc',
|
|||
|
|
borderRadius: 0,
|
|||
|
|
border: 'none',
|
|||
|
|
color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
|
|||
|
|
p: "7px",
|
|||
|
|
width: "auto",
|
|||
|
|
minWidth: 0,
|
|||
|
|
"& .MuiButton-startIcon": {
|
|||
|
|
mr: 0,
|
|||
|
|
ml: 0,
|
|||
|
|
},
|
|||
|
|
"&:hover": {
|
|||
|
|
borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type Proportions = "oneOne" | "twoOne" | "oneTwo";
|
|||
|
|
type AlignType = "left" | "right";
|
|||
|
|
|
|||
|
|
export default function SettingOpytionsPict() {
|
|||
|
|
|
|||
|
|
const [proportions, setProportions] = useState<Proportions>("oneOne");
|
|||
|
|
const [alignType, setAlignType] = useState<AlignType>("left");
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<Box sx={{display: 'flex'}}>
|
|||
|
|
<Box sx={{padding: '20px'}}>
|
|||
|
|
<Typography sx={{marginBottom: '15px'}}>Пропорции</Typography>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "10px",
|
|||
|
|
marginBottom: '20px'
|
|||
|
|
}}>
|
|||
|
|
<SelectIconButton onClick={() => setProportions("oneOne")} isActive={proportions === "oneOne"} Icon={ProportionsIcon11} />
|
|||
|
|
<SelectIconButton onClick={() => setProportions("twoOne")} isActive={proportions === "twoOne"} Icon={ProportionsIcon21} />
|
|||
|
|
<SelectIconButton onClick={() => setProportions("oneTwo")} isActive={proportions === "oneTwo"} Icon={ProportionsIcon12} />
|
|||
|
|
</Box>
|
|||
|
|
<Typography sx={{marginBottom: '15px'}}>Настройки ответов</Typography>
|
|||
|
|
<CustomCheckbox label={'Можно несколько'}/>
|
|||
|
|
<CustomCheckbox label={'Большие картинки'}/>
|
|||
|
|
<CustomCheckbox label={'Вариант "свой ответ"'}/>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{padding: '20px'}}>
|
|||
|
|
<Typography sx={{marginBottom: '15px'}}>Форма</Typography>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "10px",
|
|||
|
|
marginBottom: '20px'
|
|||
|
|
}}>
|
|||
|
|
<SelectIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={FormatIcon2} />
|
|||
|
|
<SelectIconButton onClick={() => setAlignType("right")} isActive={alignType === "right"} Icon={FormatIcon1} />
|
|||
|
|
</Box>
|
|||
|
|
<Typography sx={{marginBottom: '15px'}}>Настройки вопросов</Typography>
|
|||
|
|
<CustomCheckbox label={'Необязательный вопрос'}/>
|
|||
|
|
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
};
|