68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
|
|
import React from "react";
|
|
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
|
|
import Branching from "../../assets/icons/questionsPage/branching";
|
|
import { Box, useTheme } from "@mui/material";
|
|
import SupplementIcon from "../../assets/icons/ContactFormIcon/supplementIcon";
|
|
|
|
interface Props {
|
|
switchState: string;
|
|
SSHC: (data: string) => void;
|
|
}
|
|
|
|
export default function ButtonSettingForms({ 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: <SupplementIcon color={switchState === "supplement" ? "#ffffff" : theme.palette.grey3.main} />,
|
|
title: "Добавить шаг формы",
|
|
value: "supplement",
|
|
},
|
|
];
|
|
|
|
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>
|
|
);
|
|
}
|