diff --git a/src/components/CreateQuiz/CreateQuiz.tsx b/src/components/CreateQuiz/CreateQuiz.tsx index bfe5dfba..d200491d 100644 --- a/src/components/CreateQuiz/CreateQuiz.tsx +++ b/src/components/CreateQuiz/CreateQuiz.tsx @@ -12,9 +12,15 @@ import PencilCircleIcon from "../icons/PencilCircleIcon"; import PuzzlePieceIcon from "../icons/PuzzlePieceIcon"; import GearIcon from "../icons/GearIcon"; import LayoutIcon from "../icons/LayoutIcon"; +import CardWithImage from "./CardWithImage"; import CreationCard from "./CreationCard"; import quizCreationImage1 from "../../assets/quiz-creation-1.png"; import quizCreationImage2 from "../../assets/quiz-creation-2.png"; +import cardImage1 from "../../assets/card-1.png"; +import cardImage2 from "../../assets/card-2.png"; +import cardImage3 from "../../assets/card-3.png"; +import StartPageSettings from "./StartPageSettings"; +import CustomButton from "../CustomButton"; const createQuizMenuItems = [ @@ -47,7 +53,7 @@ export default function CreateQuiz() { disableGutters sx={{ display: "flex", - height: "calc(100vh - 80px)", + minHeight: "calc(100vh - 80px)", }} > Настройка стартовой страницы - + + + Стартовая страница + + + + + + + + Стартовая страница + + + Отключить стартовую страницу + Настроить вопросы + + ); diff --git a/src/components/CreateQuiz/CreationCard.tsx b/src/components/CreateQuiz/CreationCard.tsx index d7c4d202..951f857e 100644 --- a/src/components/CreateQuiz/CreationCard.tsx +++ b/src/components/CreateQuiz/CreationCard.tsx @@ -10,22 +10,20 @@ interface Props { export default function CreationCard({ header, text, image }: Props) { return ( - + }}> {header} void; +} + +export default function SelectableButton({ children, isSelected = false, onClick }: Props) { + const theme = useTheme(); + + return ( + + {children} + + ); +} \ No newline at end of file diff --git a/src/components/CreateQuiz/SelectableIconButton.tsx b/src/components/CreateQuiz/SelectableIconButton.tsx new file mode 100644 index 00000000..20fc366e --- /dev/null +++ b/src/components/CreateQuiz/SelectableIconButton.tsx @@ -0,0 +1,36 @@ +import { useTheme } from "@mui/material"; +import CustomButton from "../CustomButton"; + + +interface Props { + Icon: React.ElementType; + isActive?: boolean; + onClick: () => void; +} + +export default function SelectableIconButton({ Icon, isActive = false, onClick }: Props) { + const theme = useTheme(); + + return ( + } + sx={{ + backgroundColor: isActive ? undefined : theme.palette.background.default, + borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main, + color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main, + p: "7px", + width: "auto", + minWidth: 0, + "& .MuiButton-startIcon": { + mr: 0, + ml: 0, + }, + "&:hover": { + borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main, + }, + }} + /> + ); +} \ No newline at end of file diff --git a/src/components/CreateQuiz/StartPageSettings.tsx b/src/components/CreateQuiz/StartPageSettings.tsx new file mode 100644 index 00000000..6f20c912 --- /dev/null +++ b/src/components/CreateQuiz/StartPageSettings.tsx @@ -0,0 +1,311 @@ +import { Box, FormControl, Link, MenuItem, Select, TextField, Typography, useTheme } from "@mui/material"; +import { useState } from "react"; +import CustomCheckbox from "../CustomCheckbox"; +import AlignLeftIcon from "../icons/AlignLeftIcon"; +import AlignRightIcon from "../icons/AlignRightIcon"; +import ArrowDown from "../icons/ArrowDownIcon"; +import InfoIcon from "../icons/InfoIcon"; +import LayoutCenteredIcon from "../icons/LayoutCenteredIcon"; +import LayoutExpandedIcon from "../icons/LayoutExpandedIcon"; +import LayoutStandartIcon from "../icons/LayoutStandartIcon"; +import MobilePhoneIcon from "../icons/MobilePhoneIcon"; +import UploadIcon from "../icons/UploadIcon"; +import SelectableButton from "./SelectableButton"; +import SelectableIconButton from "./SelectableIconButton"; +import UploadBox from "./UploadBox"; + + +const designTypes = [ + ["Standart", (color: string) => ], + ["Expanded", (color: string) => ], + ["Centered", (color: string) => ] +] as const; +type DesignType = typeof designTypes[number][0]; + +type BackgroundType = "image" | "video"; +type AlignType = "left" | "right"; + +export default function StartPageSettings() { + const theme = useTheme(); + const [designType, setDesignType] = useState(designTypes[0][0]); + const [backgroundType, setBackgroundType] = useState("image"); + const [alignType, setAlignType] = useState("left"); + + return ( + + + Дизайн + + + + Фон + + setBackgroundType("image")}> + Изображение + + setBackgroundType("video")}> + Видео + + + {backgroundType === "image" ? + <> + Изображение + } text="5 MB максимум" /> + Размер картинок + + + мобильная версия + + + : + <> + + Добавить видео + + + } + sx={{ + height: "48px", + width: "48px", + }} + /> + Настройки видео + + Изображение для мобильной версии + } text="5 MB максимум" /> + + } + Расположение элементов + + setAlignType("left")} isActive={alignType === "left"} Icon={AlignLeftIcon} /> + setAlignType("right")} isActive={alignType === "right"} Icon={AlignRightIcon} /> + + {backgroundType === "image" && + Логотип + } + } text="5 MB максимум" /> + Favicon + + } + sx={{ + height: "48px", + width: "48px", + }} + /> + 5 MB максимум + + + + Заголовок + + Текст + + Текст кнопки + + Телефон + + + Название или слоган компании + + Сайт + + Юридическая информация + + Дополнительно + Mета заголовок + + + Текст-заполнитель — + это текст, который имеет Текст-заполнитель — + это текст, который имеет Текст-заполнитель — + это текст, который имеет Текст-заполнитель — + это текст, который имеет Текст-заполнитель + + + + ); +} + +interface CustomTextFieldProps { + placeholder: string; + text: string; +} + +function CustomTextField({ placeholder, text }: CustomTextFieldProps) { + const theme = useTheme(); + + return ( + + + + ); +} \ No newline at end of file diff --git a/src/components/CreateQuiz/UploadBox.tsx b/src/components/CreateQuiz/UploadBox.tsx new file mode 100644 index 00000000..0db58920 --- /dev/null +++ b/src/components/CreateQuiz/UploadBox.tsx @@ -0,0 +1,39 @@ +import { Box, Typography, useTheme } from "@mui/material"; +import { SxProps, Theme } from "@mui/material/styles"; + + +interface Props { + sx?: SxProps; + icon: React.ReactNode; + text?: string; +} + +export default function UploadBox({ sx, icon, text }: Props) { + const theme = useTheme(); + + return ( + + {icon} + {text} + + ); +} \ No newline at end of file diff --git a/src/components/CustomCheckbox.tsx b/src/components/CustomCheckbox.tsx new file mode 100644 index 00000000..131dabc0 --- /dev/null +++ b/src/components/CustomCheckbox.tsx @@ -0,0 +1,61 @@ +import { FormControlLabel, Checkbox, useTheme, Box } from "@mui/material"; + + +interface Props { + label: string; +} + +export default function CustomCheckbox({ label }: Props) { + const theme = useTheme(); + + return ( + } + checkedIcon={} + />} + label={label} + sx={{ + color: theme.palette.grey2.main, + ml: "-9px", + userSelect: "none", + }} + /> + ); +} + +function Icon() { + const theme = useTheme(); + + return ( + + ); +} + +function CheckedIcon() { + const theme = useTheme(); + + return ( + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/AlignLeftIcon.tsx b/src/components/icons/AlignLeftIcon.tsx new file mode 100644 index 00000000..ee2a80c4 --- /dev/null +++ b/src/components/icons/AlignLeftIcon.tsx @@ -0,0 +1,27 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function AlignLeftIcon({ color }: Props) { + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/AlignRightIcon.tsx b/src/components/icons/AlignRightIcon.tsx new file mode 100644 index 00000000..5a035dbd --- /dev/null +++ b/src/components/icons/AlignRightIcon.tsx @@ -0,0 +1,27 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function AlignRightIcon({ color }: Props) { + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/InfoIcon.tsx b/src/components/icons/InfoIcon.tsx new file mode 100644 index 00000000..43276c69 --- /dev/null +++ b/src/components/icons/InfoIcon.tsx @@ -0,0 +1,22 @@ +import { Box, useTheme } from "@mui/material"; + + +export default function InfoIcon() { + const theme = useTheme(); + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/LayoutCenteredIcon.tsx b/src/components/icons/LayoutCenteredIcon.tsx new file mode 100644 index 00000000..2c587a35 --- /dev/null +++ b/src/components/icons/LayoutCenteredIcon.tsx @@ -0,0 +1,26 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function LayoutCenteredIcon({ color }: Props) { + + return ( + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/LayoutExpandedIcon.tsx b/src/components/icons/LayoutExpandedIcon.tsx new file mode 100644 index 00000000..41789240 --- /dev/null +++ b/src/components/icons/LayoutExpandedIcon.tsx @@ -0,0 +1,26 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function LayoutExpandedIcon({ color }: Props) { + + return ( + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/LayoutStandartIcon.tsx b/src/components/icons/LayoutStandartIcon.tsx new file mode 100644 index 00000000..feaaf909 --- /dev/null +++ b/src/components/icons/LayoutStandartIcon.tsx @@ -0,0 +1,27 @@ +import { Box } from "@mui/material"; + + +interface Props { + color: string; +} + +export default function LayoutStandartIcon({ color }: Props) { + + return ( + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/MobilePhoneIcon.tsx b/src/components/icons/MobilePhoneIcon.tsx new file mode 100644 index 00000000..ea568291 --- /dev/null +++ b/src/components/icons/MobilePhoneIcon.tsx @@ -0,0 +1,30 @@ +import { Box, useTheme } from "@mui/material"; + + +interface Props { + bgcolor: string; +} + +export default function MobilePhoneIcon({ bgcolor }: Props) { + const theme = useTheme(); + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/UploadIcon.tsx b/src/components/icons/UploadIcon.tsx new file mode 100644 index 00000000..46c386c6 --- /dev/null +++ b/src/components/icons/UploadIcon.tsx @@ -0,0 +1,24 @@ +import { Box, useTheme } from "@mui/material"; + + +export default function UploadIcon() { + const theme = useTheme(); + + return ( + + + + + + + + ); +} \ No newline at end of file