95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
import {
|
||
Box,
|
||
Typography,
|
||
Switch,
|
||
useTheme,
|
||
Button,
|
||
useMediaQuery,
|
||
SxProps,
|
||
Theme,
|
||
} from "@mui/material";
|
||
|
||
import { QuestionsList } from "./QuestionsList";
|
||
import { useQuestionsStore } from "@root/questions/store";
|
||
import { useRef } from "react";
|
||
import { useUiTools } from "@root/uiTools/store";
|
||
|
||
export const BranchingPanel = (sx?: SxProps<Theme>) => {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(660));
|
||
const ref = useRef();
|
||
return (
|
||
<Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "15px",
|
||
padding: "18px",
|
||
background: "#fff",
|
||
borderRadius: "12px",
|
||
boxShadow: "0px 10px 30px #e7e7e7",
|
||
...sx,
|
||
}}
|
||
>
|
||
<Switch
|
||
checked={true}
|
||
onChange={(e) => {}}
|
||
sx={{
|
||
width: 50,
|
||
height: 30,
|
||
padding: 0,
|
||
"& .MuiSwitch-switchBase": {
|
||
padding: 0,
|
||
margin: "2px",
|
||
transitionDuration: "300ms",
|
||
"&.Mui-checked": {
|
||
transform: "translateX(20px)",
|
||
color: theme.palette.brightPurple.main,
|
||
"& + .MuiSwitch-track": {
|
||
backgroundColor: "#E8DCF9",
|
||
opacity: 1,
|
||
border: 0,
|
||
},
|
||
"&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
|
||
},
|
||
"&.Mui-disabled .MuiSwitch-thumb": {
|
||
color:
|
||
theme.palette.mode === "light"
|
||
? theme.palette.grey[100]
|
||
: theme.palette.grey[600],
|
||
},
|
||
"&.Mui-disabled + .MuiSwitch-track": {
|
||
opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
|
||
},
|
||
},
|
||
"& .MuiSwitch-thumb": {
|
||
boxSizing: "border-box",
|
||
width: 25,
|
||
height: 25,
|
||
},
|
||
"& .MuiSwitch-track": {
|
||
borderRadius: 13,
|
||
backgroundColor:
|
||
theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
|
||
opacity: 1,
|
||
transition: theme.transitions.create(["background-color"], {
|
||
duration: 500,
|
||
}),
|
||
},
|
||
}}
|
||
/>
|
||
<Box>
|
||
<Typography ref={ref} sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
|
||
Логика ветвления
|
||
</Typography>
|
||
<Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
|
||
Настройте связи между вопросами
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
<QuestionsList />
|
||
</Box>
|
||
);
|
||
};
|