113 lines
3.8 KiB
TypeScript
113 lines
3.8 KiB
TypeScript
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
|
||
import React from "react";
|
||
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
|
||
import Clue from "../../assets/icons/questionsPage/clue";
|
||
import Branching from "../../assets/icons/questionsPage/branching";
|
||
import { Box, IconButton, useTheme } from "@mui/material";
|
||
import HideIcon from "../../assets/icons/questionsPage/hideIcon";
|
||
import CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
|
||
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
|
||
import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
|
||
import {useParams} from "react-router-dom";
|
||
import { questionStore, removeQuestion, resetSomeField} from "@root/questions";
|
||
|
||
interface Props {
|
||
switchState: string;
|
||
SSHC: (data: string) => void;
|
||
totalIndex: number
|
||
}
|
||
|
||
export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: Props) {
|
||
const params = Number(useParams().quizId);
|
||
const {openedModalSettings} = questionStore()
|
||
const openedModal = () => {
|
||
resetSomeField({openedModalSettings: "open"})
|
||
console.log(openedModalSettings)
|
||
}
|
||
const theme = useTheme();
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
width: "100%",
|
||
background: "#f2f3f7",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
display: "flex",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
<MiniButtonSetting
|
||
onClick={() => {
|
||
SSHC("setting");
|
||
}}
|
||
sx={{
|
||
backgroundColor: switchState === "setting" ? theme.palette.brightPurple.main : "transparent",
|
||
color: switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
|
||
}}
|
||
>
|
||
<SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />
|
||
Настройки
|
||
</MiniButtonSetting>
|
||
<MiniButtonSetting
|
||
onClick={() => {
|
||
SSHC("help");
|
||
}}
|
||
sx={{
|
||
backgroundColor: switchState === "help" ? theme.palette.brightPurple.main : "transparent",
|
||
color: switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
|
||
}}
|
||
>
|
||
<Clue color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main} />
|
||
Помощь
|
||
</MiniButtonSetting>
|
||
<MiniButtonSetting
|
||
onClick={() => {
|
||
SSHC("branching");
|
||
openedModal()
|
||
}}
|
||
sx={{
|
||
backgroundColor: switchState === "branching" ? theme.palette.brightPurple.main : "transparent",
|
||
color: switchState === "branching" ? "#ffffff" : theme.palette.grey3.main,
|
||
}}
|
||
>
|
||
<Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />
|
||
Ветвление
|
||
</MiniButtonSetting>
|
||
<MiniButtonSetting
|
||
onClick={() => {
|
||
SSHC("image");
|
||
|
||
}}
|
||
sx={{
|
||
backgroundColor: switchState === "image" ? theme.palette.brightPurple.main : "transparent",
|
||
color: switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
|
||
}}
|
||
>
|
||
<ImgIcon color={switchState === "image" ? "#ffffff" : theme.palette.grey3.main} />
|
||
Изображение
|
||
</MiniButtonSetting>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
}}
|
||
>
|
||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||
<HideIcon color={"#4D4D4D"}/>
|
||
</IconButton>
|
||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||
<CopyIcon color={"#4D4D4D"}/>
|
||
</IconButton>
|
||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(totalIndex)}>
|
||
<DeleteIcon color={"#4D4D4D"}/>
|
||
</IconButton>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|