50 lines
2.0 KiB
TypeScript
50 lines
2.0 KiB
TypeScript
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
|
|
import React from "react";
|
|
import SettingIcon from "@icons/questionsPage/settingIcon";
|
|
import Branching from "@icons/questionsPage/branching";
|
|
import {Box, useTheme} from "@mui/material";
|
|
import SupplementIcon from "@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>
|
|
)
|
|
} |