diff --git a/src/components/icons/questionsPage/FlagIcon.tsx b/src/components/icons/questionsPage/FlagIcon.tsx new file mode 100644 index 00000000..504e6f5c --- /dev/null +++ b/src/components/icons/questionsPage/FlagIcon.tsx @@ -0,0 +1,27 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function FlagIcon({color}: Props) { + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/StarIconMini.tsx b/src/components/icons/questionsPage/StarIconMini.tsx new file mode 100644 index 00000000..bbe3c4c6 --- /dev/null +++ b/src/components/icons/questionsPage/StarIconMini.tsx @@ -0,0 +1,26 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function StarIconMini({color}: Props) { + + return ( + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/addEmoji.tsx b/src/components/icons/questionsPage/addEmoji.tsx new file mode 100644 index 00000000..063507aa --- /dev/null +++ b/src/components/icons/questionsPage/addEmoji.tsx @@ -0,0 +1,31 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function AddEmoji() { + + return ( + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/addVideofile.tsx b/src/components/icons/questionsPage/addVideofile.tsx new file mode 100644 index 00000000..e3188cd3 --- /dev/null +++ b/src/components/icons/questionsPage/addVideofile.tsx @@ -0,0 +1,29 @@ +import { Box } from "@mui/material"; + + +// interface Props { +// color: string; +// } + +export default function AddVideofile() { + + return ( + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/hashtagIcon.tsx b/src/components/icons/questionsPage/hashtagIcon.tsx new file mode 100644 index 00000000..2ebb712f --- /dev/null +++ b/src/components/icons/questionsPage/hashtagIcon.tsx @@ -0,0 +1,25 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function HashtagIcon({color}: Props) { + + return ( + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/heartIcon.tsx b/src/components/icons/questionsPage/heartIcon.tsx new file mode 100644 index 00000000..a39239cb --- /dev/null +++ b/src/components/icons/questionsPage/heartIcon.tsx @@ -0,0 +1,25 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function HeartIcon({color}: Props) { + + return ( + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/lightbulbIcon.tsx b/src/components/icons/questionsPage/lightbulbIcon.tsx new file mode 100644 index 00000000..e5200c19 --- /dev/null +++ b/src/components/icons/questionsPage/lightbulbIcon.tsx @@ -0,0 +1,27 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function LightbulbIcon({color}: Props) { + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/likeIcon.tsx b/src/components/icons/questionsPage/likeIcon.tsx new file mode 100644 index 00000000..54af4436 --- /dev/null +++ b/src/components/icons/questionsPage/likeIcon.tsx @@ -0,0 +1,27 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function LikeIcon({color}: Props) { + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/ratingStar.tsx b/src/components/icons/questionsPage/ratingStar.tsx new file mode 100644 index 00000000..41ac6de3 --- /dev/null +++ b/src/components/icons/questionsPage/ratingStar.tsx @@ -0,0 +1,25 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function RatingStar({color}: Props) { + + return ( + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/questionsPage/tropfyIcon.tsx b/src/components/icons/questionsPage/tropfyIcon.tsx new file mode 100644 index 00000000..ceef6d94 --- /dev/null +++ b/src/components/icons/questionsPage/tropfyIcon.tsx @@ -0,0 +1,29 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function TropfyIcon({color}: Props) { + + return ( + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/pages/Questions/DataOptions/DataOptions.tsx b/src/pages/Questions/DataOptions/DataOptions.tsx new file mode 100644 index 00000000..9e964b78 --- /dev/null +++ b/src/pages/Questions/DataOptions/DataOptions.tsx @@ -0,0 +1,52 @@ +import {Box, Typography, useTheme} from "@mui/material"; +import ButtonsOptions from "../ButtonsOptions"; +import SwitchData from "./switchData"; +import React, {useState} from "react"; +import InfoIcon from "@icons/InfoIcon"; +import SelectableButton from "../../../components/CreateQuiz/SelectableButton"; + +type dataType = "calendar" | "mask"; + +export default function DataOptions() { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState('setting'); + const SSHC = (data: string) => { + setSwitchState(data) + } + + const [dataType, setDataType] = useState("calendar"); + return ( + <> + + + + setDataType("calendar")}> + Использовать календарь + + setDataType("mask")}> + Использовать маску + + + + Пользователю будет предложено выбрать дату + + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/Questions/DataOptions/settingData.tsx b/src/pages/Questions/DataOptions/settingData.tsx new file mode 100644 index 00000000..12c7ee15 --- /dev/null +++ b/src/pages/Questions/DataOptions/settingData.tsx @@ -0,0 +1,21 @@ +import {Box, Typography} from "@mui/material"; +import CustomCheckbox from "@ui_kit/CustomCheckbox"; +import InfoIcon from "@icons/InfoIcon"; + + +export default function SettingsData() { + return ( + + + Настройки календаря + + + + + Настройки вопросов + + + + + ); +}; \ No newline at end of file diff --git a/src/pages/Questions/DataOptions/switchData.tsx b/src/pages/Questions/DataOptions/switchData.tsx new file mode 100644 index 00000000..151faf45 --- /dev/null +++ b/src/pages/Questions/DataOptions/switchData.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import HelpQuestions from "../helpQuestions"; +import SettingData from "./settingData"; +import BranchingQuestions from "../branchingQuestions"; + + +interface Props { + switchState: string, +} + +export default function SwitchData({switchState = 'setting' }: Props) { + + switch (switchState) { + case 'setting': + return (); + break; + case 'help': + return (); + break + case 'branching': + return (); + break; + default: + return (<>) + } +} \ No newline at end of file diff --git a/src/pages/Questions/DropDown/DropDown.tsx b/src/pages/Questions/DropDown/DropDown.tsx new file mode 100644 index 00000000..e370969e --- /dev/null +++ b/src/pages/Questions/DropDown/DropDown.tsx @@ -0,0 +1,56 @@ +import {Box, Typography, Link, useTheme} from "@mui/material"; +import React from "react"; +import EnterIcon from "../../../components/icons/questionsPage/enterIcon"; +import SwitchDropDown from "./switchDropDown"; +import ButtonsOptions from "../ButtonsOptions"; + + +export default function DropDown() { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState('setting'); + + const SSHC = (data: string) => { + setSwitchState(data) + } + + return ( + <> + + + Добавьте ответ + + + { + // console.info("I'm a button."); + // }} + > + Добавьте ответ + + или нажмите Enter + + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/Questions/DropDown/settingDropDown.tsx b/src/pages/Questions/DropDown/settingDropDown.tsx new file mode 100644 index 00000000..12c1ceaa --- /dev/null +++ b/src/pages/Questions/DropDown/settingDropDown.tsx @@ -0,0 +1,25 @@ +import {Box, Typography} from "@mui/material"; +import CustomCheckbox from "@ui_kit/CustomCheckbox"; +import CustomTextField from "@ui_kit/CustomTextField"; +import InfoIcon from "@icons/InfoIcon"; + +export default function SettingDropDown() { + return( + <> + + + Настройки ответов + + + Текст в выпадающем списке + + + + Настройки вопросов + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/Questions/DropDown/switchDropDown.tsx b/src/pages/Questions/DropDown/switchDropDown.tsx new file mode 100644 index 00000000..1d583e9c --- /dev/null +++ b/src/pages/Questions/DropDown/switchDropDown.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import HelpQuestions from "../helpQuestions"; +import SettingDropDown from "./settingDropDown"; +import BranchingQuestions from "../branchingQuestions"; + + +interface Props { + switchState: string, +} + +export default function SwitchDropDown({switchState = 'setting' }: Props) { + + switch (switchState) { + case 'setting': + return (); + break; + case 'help': + return (); + break + case 'branching': + return (); + break; + default: + return (<>) + } +} \ No newline at end of file diff --git a/src/pages/Questions/Emoji/Emoji.tsx b/src/pages/Questions/Emoji/Emoji.tsx new file mode 100644 index 00000000..7e6cb87d --- /dev/null +++ b/src/pages/Questions/Emoji/Emoji.tsx @@ -0,0 +1,58 @@ +import {Box, Link, Typography, useTheme} from "@mui/material"; +import EnterIcon from "@icons/questionsPage/enterIcon"; +import ButtonsOptions from "../ButtonsOptions"; +import SwitchEmoji from "./switchEmoji"; +import React from "react"; +import AddEmoji from "@icons/questionsPage/addEmoji"; + +export default function Emoji() { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState('setting'); + const SSHC = (data: string) => { + setSwitchState(data) + } + return ( + <> + + + + + Добавьте ответ + + + + + { + // console.info("I'm a button."); + // }} + > + Добавьте ответ + + или нажмите Enter + + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/Questions/Emoji/settingEmoji.tsx b/src/pages/Questions/Emoji/settingEmoji.tsx new file mode 100644 index 00000000..b62d377f --- /dev/null +++ b/src/pages/Questions/Emoji/settingEmoji.tsx @@ -0,0 +1,21 @@ +import {Box, Typography} from "@mui/material"; +import CustomCheckbox from "@ui_kit/CustomCheckbox"; +import InfoIcon from "@icons/InfoIcon"; + + +export default function SettingEmoji() { + return ( + + + Настройки ответов + + + + + Настройки вопросов + + + + + ); +}; \ No newline at end of file diff --git a/src/pages/Questions/Emoji/switchEmoji.tsx b/src/pages/Questions/Emoji/switchEmoji.tsx new file mode 100644 index 00000000..b2caf5ee --- /dev/null +++ b/src/pages/Questions/Emoji/switchEmoji.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import BranchingQuestions from "../branchingQuestions"; +import HelpQuestions from "../helpQuestions"; +import SettingEmoji from "./settingEmoji"; + + +interface Props { + switchState: string, +} + +export default function SwitchEmoji({switchState = 'setting' }: Props) { + + switch (switchState) { + case 'setting': + return (); + break; + case 'help': + return (); + break + case 'branching': + return (); + break; + default: + return (<>) + } +} \ No newline at end of file diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx index 44825d2e..bbeef5a1 100644 --- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx +++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx @@ -14,19 +14,22 @@ export default function OptionsAndPicture() { return ( <> - - Добавьте ответ - - + + + Добавьте ответ + + + + - - Добавьте ответ - - + + + Добавьте ответ + + + + { + setSwitchState(data) + } + return ( + <> + + + + Пользователю будет дано поле для ввода значения + + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/Questions/OwnTextField/settingTextField.tsx b/src/pages/Questions/OwnTextField/settingTextField.tsx new file mode 100644 index 00000000..44dd467f --- /dev/null +++ b/src/pages/Questions/OwnTextField/settingTextField.tsx @@ -0,0 +1,38 @@ +import {Box, FormControl, FormControlLabel, Radio, RadioGroup, Typography, useTheme} from "@mui/material"; +import CustomCheckbox from "@ui_kit/CustomCheckbox"; +import InfoIcon from "@icons/InfoIcon"; +import * as React from "react"; + + +export default function SettingEmoji() { + const [value, setValue] = React.useState('1'); + const handleChangeRadio = (event: React.ChangeEvent) => { + setValue((event.target as HTMLInputElement).value); + }; + const theme = useTheme() + return ( + + + Настройки ответов + + + } label="Односточное" /> + } label="Многострочное" /> + } label="Только числа" /> + + + + + Настройки вопросов + + + + + + ); +}; \ No newline at end of file diff --git a/src/pages/Questions/OwnTextField/switchTextField.tsx b/src/pages/Questions/OwnTextField/switchTextField.tsx new file mode 100644 index 00000000..bc28c816 --- /dev/null +++ b/src/pages/Questions/OwnTextField/switchTextField.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import BranchingQuestions from "../branchingQuestions"; +import HelpQuestions from "../helpQuestions"; +import SettingTextField from "./settingTextField"; + + +interface Props { + switchState: string, +} + +export default function SwitchTextField({switchState = 'setting' }: Props) { + + switch (switchState) { + case 'setting': + return (); + break; + case 'help': + return (); + break + case 'branching': + return (); + break; + default: + return (<>) + } +} \ No newline at end of file diff --git a/src/pages/Questions/PageOptions/PageOptions.tsx b/src/pages/Questions/PageOptions/PageOptions.tsx new file mode 100644 index 00000000..51c8175a --- /dev/null +++ b/src/pages/Questions/PageOptions/PageOptions.tsx @@ -0,0 +1,49 @@ +import {Box, Typography, useTheme} from "@mui/material"; +import ButtonsOptions from "../ButtonsOptions"; +import React from "react"; +import CustomTextField from "@ui_kit/CustomTextField"; +import AddImage from "@icons/questionsPage/addImage"; +import AddVideofile from "@icons/questionsPage/addVideofile"; +import SwitchPageOptions from "./switchPageOptions"; + +export default function PageOptions() { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState('setting'); + const SSHC = (data: string) => { + setSwitchState(data) + } + return ( + <> + + + + + Изображение + или + + Видео + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/Questions/PageOptions/SettingPageOptions.tsx b/src/pages/Questions/PageOptions/SettingPageOptions.tsx new file mode 100644 index 00000000..120c8a62 --- /dev/null +++ b/src/pages/Questions/PageOptions/SettingPageOptions.tsx @@ -0,0 +1,13 @@ +import {Box, Typography} from "@mui/material"; +import CustomCheckbox from "@ui_kit/CustomCheckbox"; +import InfoIcon from "@icons/InfoIcon"; + + +export default function SettingPageOptions() { + return ( + + Настройки вопроса + + + ); +}; \ No newline at end of file diff --git a/src/pages/Questions/PageOptions/switchPageOptions.tsx b/src/pages/Questions/PageOptions/switchPageOptions.tsx new file mode 100644 index 00000000..d760c8bc --- /dev/null +++ b/src/pages/Questions/PageOptions/switchPageOptions.tsx @@ -0,0 +1,25 @@ +import BranchingQuestions from "../branchingQuestions"; +import HelpQuestions from "../helpQuestions"; +import SettingPageOptions from "./SettingPageOptions"; + + +interface Props { + switchState: string, +} + +export default function SwitchPageOptions({switchState = 'setting' }: Props) { + + switch (switchState) { + case 'setting': + return (); + break; + case 'help': + return (); + break + case 'branching': + return (); + break; + default: + return (<>) + } +} \ No newline at end of file diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index 08c2e9e7..0f791c7d 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -1,8 +1,5 @@ import React from "react"; import Stepper from '@ui_kit/Stepper'; -import Accordion from '@mui/material/Accordion'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import AccordionDetails from '@mui/material/AccordionDetails'; import {Box, Button, IconButton, Typography, Paper, useTheme} from '@mui/material'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import CustomTextField from "@ui_kit/CustomTextField"; @@ -14,6 +11,14 @@ import TypeQuestions from "./TypeQuestions"; import AnswerOptions from "./answerOptions/AnswerOptions"; import OptionsPicture from "./OptionsPicture/OptionsPicture"; import OptionsAndPicture from "./OptionsAndPicture/OptionsAndPicture"; +import Emoji from "./Emoji/Emoji"; +import OwnTextField from "./OwnTextField/OwnTextField"; +import DropDown from "./DropDown/DropDown"; +import DataOptions from "./DataOptions/DataOptions"; +import SliderOptions from "./SliderOptions/SliderOptions"; +import UploadFile from "./UploadFile/UploadFile"; +import PageOptions from "./PageOptions/PageOptions"; +import RatingOptions from "./RatingOptions/RatingOptions"; export default function QuestionsPage() { @@ -49,6 +54,14 @@ export default function QuestionsPage() { + + + + + + + + diff --git a/src/pages/Questions/RatingOptions/RatingOptions.tsx b/src/pages/Questions/RatingOptions/RatingOptions.tsx new file mode 100644 index 00000000..45b11252 --- /dev/null +++ b/src/pages/Questions/RatingOptions/RatingOptions.tsx @@ -0,0 +1,44 @@ +import {Box, Typography, useTheme} from "@mui/material"; +import ButtonsOptions from "../ButtonsOptions"; +import React from "react"; +import Rating from '@mui/material/Rating'; +import RatingStar from "@icons/questionsPage/ratingStar"; +import SwitchRating from "./switchRating"; + + +export default function RatingOptions() { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState('setting'); + const SSHC = (data: string) => { + setSwitchState(data) + } + return ( + <> + + `${value} Heart${value !== 1 ? 's' : ''}`} + precision={1} + icon={} + emptyIcon={} + sx={{display: 'flex', gap: '15px'}} + /> + + Негативно + Позитивно + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/Questions/RatingOptions/settingRating.tsx b/src/pages/Questions/RatingOptions/settingRating.tsx new file mode 100644 index 00000000..c27c7ad0 --- /dev/null +++ b/src/pages/Questions/RatingOptions/settingRating.tsx @@ -0,0 +1,61 @@ +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: }, + {icon: }, + {icon: }, + {icon: }, + {icon: }, + {icon: }, + {icon: }, + ] + + return ( + + + Настройки рейтинга + Форма + + {buttonRatingForm.map( (e,i) => ( + {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} + + ))} + + Количество + + + + + Настройки вопросов + + + + + ); +}; \ No newline at end of file diff --git a/src/pages/Questions/RatingOptions/switchRating.tsx b/src/pages/Questions/RatingOptions/switchRating.tsx new file mode 100644 index 00000000..c4d3aa73 --- /dev/null +++ b/src/pages/Questions/RatingOptions/switchRating.tsx @@ -0,0 +1,25 @@ +import BranchingQuestions from "../branchingQuestions"; +import HelpQuestions from "../helpQuestions"; +import SettingRating from "./settingRating"; + + +interface Props { + switchState: string, +} + +export default function SwitchRating({switchState = 'setting' }: Props) { + + switch (switchState) { + case 'setting': + return (); + break; + case 'help': + return (); + break + case 'branching': + return (); + break; + default: + return (<>) + } +} \ No newline at end of file diff --git a/src/pages/Questions/SliderOptions/SliderOptions.tsx b/src/pages/Questions/SliderOptions/SliderOptions.tsx new file mode 100644 index 00000000..95625c00 --- /dev/null +++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx @@ -0,0 +1,50 @@ +import {Box, Typography, useTheme} from "@mui/material"; +import ButtonsOptions from "../ButtonsOptions"; +import React from "react"; +import CustomTextField from "@ui_kit/CustomTextField"; +import SwitchSlider from "./switchSlider"; + +export default function SliderOptions() { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState('setting'); + const SSHC = (data: string) => { + setSwitchState(data) + } + + return ( + <> + + + + Выбор значения из диапазона + + + — + + + + + + Начальное значение + + + + Шаг + + + + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/Questions/SliderOptions/settingSlider.tsx b/src/pages/Questions/SliderOptions/settingSlider.tsx new file mode 100644 index 00000000..70e9953d --- /dev/null +++ b/src/pages/Questions/SliderOptions/settingSlider.tsx @@ -0,0 +1,20 @@ +import {Box, Typography} from "@mui/material"; +import CustomCheckbox from "@ui_kit/CustomCheckbox"; +import InfoIcon from "@icons/InfoIcon"; + + +export default function SettingSlider() { + return ( + + + Настройки ползунка + + + + Настройки вопросов + + + + + ); +}; \ No newline at end of file diff --git a/src/pages/Questions/SliderOptions/switchSlider.tsx b/src/pages/Questions/SliderOptions/switchSlider.tsx new file mode 100644 index 00000000..3b0fa744 --- /dev/null +++ b/src/pages/Questions/SliderOptions/switchSlider.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import HelpQuestions from "../helpQuestions"; +import BranchingQuestions from "../branchingQuestions"; +import SettingSlider from "./settingSlider"; + + +interface Props { + switchState: string, +} + +export default function SwitchSlider({switchState = 'setting' }: Props) { + + switch (switchState) { + case 'setting': + return (); + break; + case 'help': + return (); + break + case 'branching': + return (); + break; + default: + return (<>) + } +} \ No newline at end of file diff --git a/src/pages/Questions/UploadFile/UploadFile.tsx b/src/pages/Questions/UploadFile/UploadFile.tsx new file mode 100644 index 00000000..984678db --- /dev/null +++ b/src/pages/Questions/UploadFile/UploadFile.tsx @@ -0,0 +1,129 @@ +import {Box, FormControl, MenuItem, Select, SelectChangeEvent, Typography, useTheme} from "@mui/material"; +import ButtonsOptions from "../ButtonsOptions"; +import React, {useState} from "react"; +import InfoIcon from "@icons/InfoIcon"; +import ArrowDown from "@icons/ArrowDownIcon"; +import SwitchUpload from "./switchUpload"; + +export default function UploadFile() { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState('setting'); + const SSHC = (data: string) => { + setSwitchState(data) + } + + const designTypes = [ + ["Все типы файлов"], + ["Изображения"], + ["Видео"], + ["Аудио"], + ["Документ"] + ] + const [designType, setDesignType] = useState(designTypes[0][0]); + const handleChange = (event: SelectChangeEvent) => { + setDesignType(event.target.value); + } + + return ( + <> + + + + + + + + + Пользователь может загрузить любой собственный файл + + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/Questions/UploadFile/settingUpload.tsx b/src/pages/Questions/UploadFile/settingUpload.tsx new file mode 100644 index 00000000..97cb7607 --- /dev/null +++ b/src/pages/Questions/UploadFile/settingUpload.tsx @@ -0,0 +1,15 @@ +import {Box, Typography} from "@mui/material"; +import CustomCheckbox from "@ui_kit/CustomCheckbox"; +import InfoIcon from "@icons/InfoIcon"; + + +export default function SettingsUpload() { + return ( + + Настройки вопроса + + + + + ); +}; \ No newline at end of file diff --git a/src/pages/Questions/UploadFile/switchUpload.tsx b/src/pages/Questions/UploadFile/switchUpload.tsx new file mode 100644 index 00000000..30017cf3 --- /dev/null +++ b/src/pages/Questions/UploadFile/switchUpload.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import BranchingQuestions from "../branchingQuestions"; +import HelpQuestions from "../helpQuestions"; +import SettingsUpload from "./settingUpload"; + + +interface Props { + switchState: string, +} + +export default function SwitchUpload({switchState = 'setting' }: Props) { + + switch (switchState) { + case 'setting': + return (); + break; + case 'help': + return (); + break + case 'branching': + return (); + break; + default: + return (<>) + } +} \ No newline at end of file diff --git a/src/pages/Questions/UploadImage.tsx b/src/pages/Questions/UploadImage.tsx index 238d1bf4..9bd85969 100644 --- a/src/pages/Questions/UploadImage.tsx +++ b/src/pages/Questions/UploadImage.tsx @@ -3,7 +3,7 @@ import UploadBox from "../../components/CreateQuiz/UploadBox"; import UploadIcon from "@icons/UploadIcon"; import * as React from "react"; -const Modalka = ({open, handleClose, imgHC}:any) => { +const Modalka = ({imgHC}:any) => { const theme = useTheme(); const dropZone = React.useRef(null); @@ -79,7 +79,6 @@ export default function UploadImage () { const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); - const imgHC = (imgInp:any) => { const [file] = imgInp.files setImg(URL.createObjectURL(file))