import { Box, Typography, Switch, useTheme } from "@mui/material"; import { QuestionsList } from "./QuestionsList"; import { updateOpenBranchingPanel } from "@root/questions/actions"; import {useQuestionsStore} from "@root/questions/store"; export const BranchingPanel = () => { const theme = useTheme(); const {openBranchingPanel} = useQuestionsStore.getState() return ( { updateOpenBranchingPanel(!value) }} 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, }), }, }} /> Логика ветвления Настройте связи между вопросами { openBranchingPanel === true && } ); };