88 lines
3.7 KiB
TypeScript
88 lines
3.7 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 ImgIcon from "@icons/questionsPage/imgIcon";
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
switchState: string
|
|||
|
|
SSHC: (data:string) => void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function ButtonsOptionsAndPict ({SSHC, switchState}:Props) {
|
|||
|
|
|
|||
|
|
const theme = useTheme();
|
|||
|
|
return (
|
|||
|
|
<Box sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
width: '100%',
|
|||
|
|
background: '#f2f3f7'
|
|||
|
|
}}>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
padding: '20px',
|
|||
|
|
display: 'flex',
|
|||
|
|
gap: '10px'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<MiniButtonSetting
|
|||
|
|
onClick={()=>{SSHC('setting')}}
|
|||
|
|
sx={{backgroundColor: switchState === 'setting' ? theme.palette.brightPurple.main : 'transparent',
|
|||
|
|
color: switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<SettingIcon color={switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main}/>
|
|||
|
|
Настройки
|
|||
|
|
</MiniButtonSetting>
|
|||
|
|
<MiniButtonSetting
|
|||
|
|
onClick={()=>{SSHC('help')}}
|
|||
|
|
sx={{backgroundColor: switchState === 'help' ? theme.palette.brightPurple.main : 'transparent',
|
|||
|
|
color: switchState === 'help' ? '#ffffff' : theme.palette.grey3.main,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Clue color={switchState === 'help' ? '#ffffff' : theme.palette.grey3.main}/>
|
|||
|
|
Помощь
|
|||
|
|
</MiniButtonSetting>
|
|||
|
|
<MiniButtonSetting
|
|||
|
|
onClick={()=>{SSHC('branching')}}
|
|||
|
|
sx={{backgroundColor: switchState === 'branching' ? theme.palette.brightPurple.main : 'transparent',
|
|||
|
|
color: switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Branching color={switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main}/>
|
|||
|
|
Ветвление
|
|||
|
|
</MiniButtonSetting>
|
|||
|
|
<MiniButtonSetting
|
|||
|
|
onClick={()=>{SSHC('image')}}
|
|||
|
|
sx={{backgroundColor: switchState === 'image' ? theme.palette.brightPurple.main : 'transparent',
|
|||
|
|
color: switchState === 'image' ? '#ffffff' : theme.palette.grey3.main,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<ImgIcon color={switchState === 'image' ? '#ffffff' : theme.palette.grey3.main}/>
|
|||
|
|
Изображение
|
|||
|
|
</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>
|
|||
|
|
)
|
|||
|
|
}
|