61 lines
3.0 KiB
TypeScript
61 lines
3.0 KiB
TypeScript
|
import {Box, ButtonBase, Slider, Typography, useTheme} from "@mui/material";
|
|||
|
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
|||
|
|
import InfoIcon from "@icons/InfoIcon";
|
|||
|
|
import React from "react";
|
|||
|
|
import RatingStar from "@icons/questionsPage/ratingStar";
|
|||
|
|
import TropfyIcon from "@icons/questionsPage/tropfyIcon";
|
|||
|
|
import FlagIcon from "@icons/questionsPage/FlagIcon";
|
|||
|
|
import HeartIcon from "@icons/questionsPage/heartIcon";
|
|||
|
|
import LikeIcon from "@icons/questionsPage/likeIcon";
|
|||
|
|
import LightbulbIcon from "@icons/questionsPage/lightbulbIcon";
|
|||
|
|
import HashtagIcon from "@icons/questionsPage/hashtagIcon";
|
|||
|
|
import StarIconMini from "@icons/questionsPage/StarIconMini";
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default function SettingSlider() {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const [current, setCurrent] = React.useState(1)
|
|||
|
|
const buttonRatingForm: {icon: JSX.Element} [] =[
|
|||
|
|
{icon: <StarIconMini color={theme.palette.grey3.main}/>},
|
|||
|
|
{icon: <TropfyIcon color={theme.palette.grey3.main}/>},
|
|||
|
|
{icon: <FlagIcon color={theme.palette.grey3.main}/>},
|
|||
|
|
{icon: <HeartIcon color={theme.palette.grey3.main}/>},
|
|||
|
|
{icon: <LikeIcon color={theme.palette.grey3.main}/>},
|
|||
|
|
{icon: <LightbulbIcon color={theme.palette.grey3.main}/>},
|
|||
|
|
{icon: <HashtagIcon color={theme.palette.grey3.main}/>},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box sx={{display: 'flex'}}>
|
|||
|
|
<Box sx={{padding: '20px'}}>
|
|||
|
|
<Typography sx={{marginBottom: '15px'}}>Настройки рейтинга</Typography>
|
|||
|
|
<Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Форма</Typography>
|
|||
|
|
<Box sx={{display: 'flex', marginBottom: '15px' }}>
|
|||
|
|
{buttonRatingForm.map( (e,i) => (
|
|||
|
|
<ButtonBase
|
|||
|
|
key={i}
|
|||
|
|
onClick={()=>{setCurrent(i)}}
|
|||
|
|
sx={{backgroundColor: current === i ? theme.palette.brightPurple.main : 'transparent',
|
|||
|
|
color: current === i ? '#ffffff' : theme.palette.grey3.main,
|
|||
|
|
width: '40px',
|
|||
|
|
height: '40px',
|
|||
|
|
borderRadius: '4px'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{e.icon}
|
|||
|
|
</ButtonBase>
|
|||
|
|
))}
|
|||
|
|
</Box>
|
|||
|
|
<Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Количество</Typography>
|
|||
|
|
<Slider defaultValue={5} min={1} max={10} aria-label="Default" valueLabelDisplay="auto" sx={{color: theme.palette.brightPurple.main}} />
|
|||
|
|
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{padding: '20px'}}>
|
|||
|
|
<Typography>Настройки вопросов</Typography>
|
|||
|
|
<CustomCheckbox label={'Необязательный вопрос'}/>
|
|||
|
|
<CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
};
|