87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
|
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 StarIconPoints from "./StarIconsPoints";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
switchState: string;
|
||
|
|
SSHC: (data: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
|
||
|
|
const theme = useTheme();
|
||
|
|
const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
|
||
|
|
{
|
||
|
|
icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
|
||
|
|
title: "Настройки",
|
||
|
|
value: "setting",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />,
|
||
|
|
title: "Ветвление",
|
||
|
|
value: "branching",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: <StarIconPoints color={switchState === "Points" ? "#ffffff" : theme.palette.grey3.main} />,
|
||
|
|
title: "Баллы",
|
||
|
|
value: "points",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
width: "100%",
|
||
|
|
background: "#F2F3F7",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
padding: "20px",
|
||
|
|
display: "flex",
|
||
|
|
gap: "10px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{buttonSetting.map((e, i) => (
|
||
|
|
<MiniButtonSetting
|
||
|
|
key={i}
|
||
|
|
onClick={() => {
|
||
|
|
SSHC(e.value);
|
||
|
|
}}
|
||
|
|
sx={{
|
||
|
|
backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : "transparent",
|
||
|
|
color: switchState === e.value ? "#ffffff" : theme.palette.grey3.main,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{e.icon}
|
||
|
|
{e.title}
|
||
|
|
</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>
|
||
|
|
);
|
||
|
|
}
|