frontPanel/src/pages/Questions/ButtonsOptionsAndPict.tsx

import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react";
import SettingIcon from "@icons/questionsPage/settingIcon";
import Clue from "@icons/questionsPage/clue";
import Branching from "@icons/questionsPage/branching";
import { Box, IconButton, useTheme } from "@mui/material";
import HideIcon from "@icons/questionsPage/hideIcon";
import CopyIcon from "@icons/questionsPage/CopyIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import ImgIcon from "@icons/questionsPage/imgIcon";

interface Props {
  switchState: string;
  SSHC: (data: string) => void;
}

export default function ButtonsOptionsAndPict({ SSHC, switchState }: Props) {
  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");
          }}
          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 />
        </IconButton>
        <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
          <CopyIcon />
        </IconButton>
        <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
          <DeleteIcon />
        </IconButton>
      </Box>
    </Box>
  );
}