112 lines
2.9 KiB
TypeScript
112 lines
2.9 KiB
TypeScript
import React from "react";
|
|
import { Box, IconButton, useTheme, useMediaQuery } from "@mui/material";
|
|
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
|
|
import SettingIcon from "@icons/questionsPage/settingIcon";
|
|
import Branching from "@icons/questionsPage/branching";
|
|
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 isTablet = useMediaQuery(theme.breakpoints.down(800));
|
|
|
|
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",
|
|
flexWrap: "wrap",
|
|
gap: "10px",
|
|
}}
|
|
>
|
|
{buttonSetting.map(({ icon, title, value }, index) => (
|
|
<MiniButtonSetting
|
|
key={index}
|
|
onClick={() => {
|
|
SSHC(value);
|
|
}}
|
|
sx={{
|
|
backgroundColor:
|
|
switchState === value
|
|
? theme.palette.brightPurple.main
|
|
: "transparent",
|
|
color:
|
|
switchState === value ? "#ffffff" : theme.palette.grey3.main,
|
|
}}
|
|
>
|
|
{icon}
|
|
{!isTablet && title}
|
|
</MiniButtonSetting>
|
|
))}
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
padding: "20px",
|
|
display: "flex",
|
|
}}
|
|
>
|
|
{/* <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
|
<HideIcon style={{ color: "#4D4D4D" }} />
|
|
</IconButton> */}
|
|
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
|
<CopyIcon style={{ color: "#4D4D4D" }} />
|
|
</IconButton>
|
|
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
|
<DeleteIcon style={{ color: "#4D4D4D" }} />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|