100 lines
4.5 KiB
TypeScript
100 lines
4.5 KiB
TypeScript
|
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
|
|||
|
|
import React from "react";
|
|||
|
|
import SettingIcon from "../../components/icons/questionsPage/settingIcon";
|
|||
|
|
import Clue from "../../components/icons/questionsPage/clue";
|
|||
|
|
import Branching from "../../components/icons/questionsPage/branching";
|
|||
|
|
import ImgIcon from "../../components/icons/questionsPage/imgIcon";
|
|||
|
|
import {Box, IconButton, useTheme} from "@mui/material";
|
|||
|
|
import HideIcon from "../../components/icons/questionsPage/hideIcon";
|
|||
|
|
import CopyIcon from "../../components/icons/questionsPage/CopyIcon";
|
|||
|
|
import DeleteIcon from "../../components/icons/questionsPage/deleteIcon";
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default function ButtonsOptions () {
|
|||
|
|
// const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
|
|||
|
|
// {icon: <SettingIcon/>, title: 'Настройки', value: 'setting'},
|
|||
|
|
// {icon: <Clue/>, title: 'Подсказка', value: 'help'},
|
|||
|
|
// {icon: <Branching/>, title: 'Ветвление', value: 'branching'},
|
|||
|
|
// {icon: <ImgIcon/>, title: 'Изображение', value: 'image'},
|
|||
|
|
// ]
|
|||
|
|
const [switchState, setSwitchState] = React.useState('setting');
|
|||
|
|
const theme = useTheme();
|
|||
|
|
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={()=>{setSwitchState({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>*/}
|
|||
|
|
{/*))}*/}
|
|||
|
|
<MiniButtonSetting
|
|||
|
|
onClick={()=>{setSwitchState('setting')}}
|
|||
|
|
sx={{backgroundColor: switchState === 'setting' ? theme.palette.brightPurple.main : 'transparent',
|
|||
|
|
color: switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<SettingIcon/>
|
|||
|
|
Настройки
|
|||
|
|
</MiniButtonSetting>
|
|||
|
|
<MiniButtonSetting
|
|||
|
|
onClick={()=>{setSwitchState('help')}}
|
|||
|
|
sx={{backgroundColor: switchState === 'help' ? theme.palette.brightPurple.main : 'transparent',
|
|||
|
|
color: switchState === 'help' ? '#ffffff' : theme.palette.grey3.main,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Clue/> Подсказка
|
|||
|
|
</MiniButtonSetting>
|
|||
|
|
<MiniButtonSetting
|
|||
|
|
onClick={()=>{setSwitchState('branching')}}
|
|||
|
|
sx={{backgroundColor: switchState === 'branching' ? theme.palette.brightPurple.main : 'transparent',
|
|||
|
|
color: switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Branching/> Ветвление
|
|||
|
|
</MiniButtonSetting>
|
|||
|
|
<MiniButtonSetting
|
|||
|
|
onClick={()=>{setSwitchState('image')}}
|
|||
|
|
sx={{backgroundColor: switchState === 'image' ? theme.palette.brightPurple.main : 'transparent',
|
|||
|
|
color: switchState === 'image' ? '#ffffff' : theme.palette.grey3.main,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<ImgIcon/> Изображение
|
|||
|
|
</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>
|
|||
|
|
)
|
|||
|
|
}
|