diff --git a/src/components/CreateQuiz/SelectableButton.tsx b/src/components/CreateQuiz/SelectableButton.tsx index 741960ca..81d1d38c 100755 --- a/src/components/CreateQuiz/SelectableButton.tsx +++ b/src/components/CreateQuiz/SelectableButton.tsx @@ -5,20 +5,21 @@ import CustomButton from "../CustomButton"; interface Props { children?: React.ReactNode; isSelected?: boolean; + isSelectedModal?: boolean; onClick: () => void; } -export default function SelectableButton({ children, isSelected = false, onClick }: Props) { +export default function SelectableButton({ children, isSelected = false, isSelectedModal = false, onClick }: Props) { const theme = useTheme(); return ( - {icon} + {icon} + void +} -export default function ButtonsOptions () { - // const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[ - // {icon: , title: 'Настройки', value: 'setting'}, - // {icon: , title: 'Подсказка', value: 'help'}, - // {icon: , title: 'Ветвление', value: 'branching'}, - // {icon: , title: 'Изображение', value: 'image'}, - // ] - const [switchState, setSwitchState] = React.useState('setting'); +export default function ButtonsOptions ({SSHC, switchState}:Props) { + const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[ + {icon: , title: 'Настройки', value: 'setting'}, + {icon: , title: 'Подсказка', value: 'help'}, + {icon: , title: 'Ветвление', value: 'branching'}, + {icon: , title: 'Изображение', value: 'image'}, + ] const theme = useTheme(); return ( - {/*{buttonSetting.map( (e,i) => (*/} - {/* {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}*/} - {/* */} - {/*))}*/} - {setSwitchState('setting')}} - sx={{backgroundColor: switchState === 'setting' ? theme.palette.brightPurple.main : 'transparent', - color: switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main, - }} - > - - Настройки - - {setSwitchState('help')}} - sx={{backgroundColor: switchState === 'help' ? theme.palette.brightPurple.main : 'transparent', - color: switchState === 'help' ? '#ffffff' : theme.palette.grey3.main, - }} - > - Подсказка - - {setSwitchState('branching')}} - sx={{backgroundColor: switchState === 'branching' ? theme.palette.brightPurple.main : 'transparent', - color: switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main, - }} - > - Ветвление - - {setSwitchState('image')}} - sx={{backgroundColor: switchState === 'image' ? theme.palette.brightPurple.main : 'transparent', - color: switchState === 'image' ? '#ffffff' : theme.palette.grey3.main, - }} - > - Изображение - + {buttonSetting.map( (e,i) => ( + {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} + + ))} + {/*{setSwitchState('setting')}}*/} + {/* sx={{backgroundColor: switchState === 'setting' ? theme.palette.brightPurple.main : 'transparent',*/} + {/* color: switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main,*/} + {/* }}*/} + {/*>*/} + {/* */} + {/* Настройки*/} + {/**/} + {/*{setSwitchState('help')}}*/} + {/* sx={{backgroundColor: switchState === 'help' ? theme.palette.brightPurple.main : 'transparent',*/} + {/* color: switchState === 'help' ? '#ffffff' : theme.palette.grey3.main,*/} + {/* }}*/} + {/*>*/} + {/* Подсказка*/} + {/**/} + {/*{setSwitchState('branching')}}*/} + {/* sx={{backgroundColor: switchState === 'branching' ? theme.palette.brightPurple.main : 'transparent',*/} + {/* color: switchState === 'branching' ? '#ffffff' : theme.palette.grey3.main,*/} + {/* }}*/} + {/*>*/} + {/* Ветвление*/} + {/**/} + {/*{setSwitchState('image')}}*/} + {/* sx={{backgroundColor: switchState === 'image' ? theme.palette.brightPurple.main : 'transparent',*/} + {/* color: switchState === 'image' ? '#ffffff' : theme.palette.grey3.main,*/} + {/* }}*/} + {/*>*/} + {/* Изображение*/} + {/**/} - {/**/} diff --git a/src/pages/Questions/answerOptions/AnswerOptions.tsx b/src/pages/Questions/answerOptions/AnswerOptions.tsx index 3475e9ee..c547f50b 100755 --- a/src/pages/Questions/answerOptions/AnswerOptions.tsx +++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx @@ -2,15 +2,15 @@ import {Box, Typography, Link, useTheme} from "@mui/material"; import React from "react"; import EnterIcon from "../../../components/icons/questionsPage/enterIcon"; import ButtonsOptions from "../ButtonsOptions"; -import ResponseSettings from "./responseSettings"; -import HelpAnswerOptions from "./helpAnswerOptions"; -import UploadImage from "./UploadImage"; import SwitchAnswerOptions from "./switchAnswerOptions"; export default function AnswerOptions() { const theme = useTheme(); const [switchState, setSwitchState] = React.useState('setting'); + const SSHC = (data: string) => { + setSwitchState(data) + } return ( <> @@ -47,7 +47,7 @@ export default function AnswerOptions() { - + {/**/} {/**/} diff --git a/src/pages/Questions/answerOptions/UploadImage.tsx b/src/pages/Questions/answerOptions/UploadImage.tsx index 160fcca7..f9f5506b 100644 --- a/src/pages/Questions/answerOptions/UploadImage.tsx +++ b/src/pages/Questions/answerOptions/UploadImage.tsx @@ -1,14 +1,72 @@ -import {Typography, Box, useTheme} from "@mui/material"; +import {Typography, Box, useTheme, ButtonBase, Modal} from "@mui/material"; import UploadBox from "../../../components/CreateQuiz/UploadBox"; import UploadIcon from "../../../components/icons/UploadIcon"; +import * as React from "react"; export default function UploadImage () { const theme = useTheme(); + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); return ( - + Загрузить изображение - } text="5 MB максимум" /> + + } text="5 MB максимум" /> + + + + + Добавьте изображение + + + + + + Загрузите или перетяните сюда файл + Принимает JPG, PNG, и GIF формат — максимум 5mb + + + + Или выберите на фотостоке + + + ) } \ No newline at end of file diff --git a/src/pages/Questions/answerOptions/helpAnswerOptions.tsx b/src/pages/Questions/answerOptions/helpAnswerOptions.tsx index 8c8b4e36..f559c17d 100644 --- a/src/pages/Questions/answerOptions/helpAnswerOptions.tsx +++ b/src/pages/Questions/answerOptions/helpAnswerOptions.tsx @@ -1,14 +1,23 @@ -import {Box, Typography, useTheme} from "@mui/material"; +import {Box, Button, ButtonBase, Modal, Typography, useTheme} from "@mui/material"; +import * as React from 'react'; import SelectableButton from "../../../components/CreateQuiz/SelectableButton"; import CustomTextField from "@ui_kit/CustomTextField"; import {useState} from "react"; import UploadIcon from "../../../components/icons/UploadIcon"; import UploadBox from "../../../components/CreateQuiz/UploadBox"; +import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; +import CustomButton from "../../../components/CustomButton"; type BackgroundType = "text" | "video"; +type BackgroundTypeModal = "linkVideo" | "ownVideo" export default function HelpAnswerOptions() { + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); const [backgroundType, setBackgroundType] = useState("text"); + const [backgroundTypeModal, setBackgroundTypeModal] = useState("linkVideo"); + const theme = useTheme() return ( Подсказка консультанта @@ -28,16 +37,96 @@ export default function HelpAnswerOptions() { : - <> - Загрузите видео - } - sx={{ - height: "48px", - width: "48px", - }} - /> - + + Загрузите видео + + } + + sx={{ + height: "48px", + width: "48px", + }} + /> + + + + + Видео можно вставить с любого хостинга: + YouTube, Vimeo или загрузить собственное + Готово + + + setBackgroundTypeModal("linkVideo")}> + Ссылка на видео + + setBackgroundTypeModal("ownVideo")}> + Загрузить свое + + + {backgroundTypeModal === "linkVideo" ? + + Ссылка на видео + + + : + + Загрузите видео + + + + + + Добавить видео + Принимает .mp4 и .mov формат — максимум 100мб + + + + + } + + + } );