diff --git a/src/App.tsx b/src/App.tsx index 9b451632..922eb20d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -43,6 +43,7 @@ import { isAxiosError } from "axios"; import RecoverPassword from "./pages/auth/RecoverPassword"; import { InfoPrivilege } from "./pages/InfoPrivilege"; import OutdatedLink from "./pages/auth/OutdatedLink"; +import QuizGallery from "./pages/createQuize/QuizGallery"; import { useAfterpay } from "@utils/hooks/useAfterpay"; const MyQuizzesFull = lazy(() => import("./pages/createQuize/MyQuizzesFull")); @@ -259,6 +260,7 @@ export default function App() { /> } /> + } /> } />} diff --git a/src/assets/quiz-template-1.png b/src/assets/quiz-templates/quiz-template-1.png old mode 100755 new mode 100644 similarity index 100% rename from src/assets/quiz-template-1.png rename to src/assets/quiz-templates/quiz-template-1.png diff --git a/src/assets/quiz-template-2.png b/src/assets/quiz-templates/quiz-template-2.png old mode 100755 new mode 100644 similarity index 100% rename from src/assets/quiz-template-2.png rename to src/assets/quiz-templates/quiz-template-2.png diff --git a/src/assets/quiz-template-3.png b/src/assets/quiz-templates/quiz-template-3.png old mode 100755 new mode 100644 similarity index 100% rename from src/assets/quiz-template-3.png rename to src/assets/quiz-templates/quiz-template-3.png diff --git a/src/assets/quiz-template-4.png b/src/assets/quiz-templates/quiz-template-4.png old mode 100755 new mode 100644 similarity index 100% rename from src/assets/quiz-template-4.png rename to src/assets/quiz-templates/quiz-template-4.png diff --git a/src/assets/quiz-template-5.png b/src/assets/quiz-templates/quiz-template-5.png old mode 100755 new mode 100644 similarity index 100% rename from src/assets/quiz-template-5.png rename to src/assets/quiz-templates/quiz-template-5.png diff --git a/src/assets/quiz-template-6.png b/src/assets/quiz-templates/quiz-template-6.png old mode 100755 new mode 100644 similarity index 100% rename from src/assets/quiz-template-6.png rename to src/assets/quiz-templates/quiz-template-6.png diff --git a/src/pages/createQuize/QuizGallery.tsx b/src/pages/createQuize/QuizGallery.tsx deleted file mode 100755 index 9c5defc1..00000000 --- a/src/pages/createQuize/QuizGallery.tsx +++ /dev/null @@ -1,294 +0,0 @@ -import { - Box, - Button, - FormControl, - InputAdornment, - InputLabel, - MenuItem, - Select, - Tabs, - TextField, - Typography, - useTheme, -} from "@mui/material"; -import ComplexNavText from "./ComplexNavText"; -import LayoutIconOld from "@icons/LayoutIcon"; -import SearchIcon from "@icons/SearchIcon"; -import SectionWrapper from "@ui_kit/SectionWrapper"; -import ArrowDown from "@icons/ArrowDownIcon"; -import { useState } from "react"; -import { CustomTab } from "./CustomTab"; -import QuizTemplateCard from "./QuizTemplateCard"; -import quizTemplateImage1 from "../../assets/quiz-template-1.png"; -import quizTemplateImage2 from "../../assets/quiz-template-2.png"; -import quizTemplateImage3 from "../../assets/quiz-template-3.png"; -import quizTemplateImage4 from "../../assets/quiz-template-4.png"; -import quizTemplateImage5 from "../../assets/quiz-template-5.png"; -import quizTemplateImage6 from "../../assets/quiz-template-6.png"; - -const categories = [ - "Категория 1", - "Категория 2", - "Категория 3", - "Категория 4", -] as const; -type Category = (typeof categories)[number]; - -export default function QuizGallery() { - const theme = useTheme(); - const [category, setCategory] = useState(""); - const [tabIndex, setTabIndex] = useState(0); - - const handleTabChange = (event: React.SyntheticEvent, newValue: number) => { - setTabIndex(newValue); - }; - - return ( - - - - Мои quiz - - - - - - Пустой шаблон - - - Широкий инструментарий создания quiz с нуля - - - - - - - - - - - ), - }} - /> - - - - Категории - - - - - - - - - - - - - - Квизы - - (3) - - - - - - - - Исследования и опросы - - (3) - - - - - - - - - Нет подходящего шаблона? - - - - ); -} diff --git a/src/pages/createQuize/QuizTemplateCard.tsx b/src/pages/createQuize/QuizGallery/QuizTemplateCard.tsx old mode 100755 new mode 100644 similarity index 70% rename from src/pages/createQuize/QuizTemplateCard.tsx rename to src/pages/createQuize/QuizGallery/QuizTemplateCard.tsx index f998bbab..04bc43c5 --- a/src/pages/createQuize/QuizTemplateCard.tsx +++ b/src/pages/createQuize/QuizGallery/QuizTemplateCard.tsx @@ -1,19 +1,41 @@ -import { Box, Chip, Typography, useTheme } from "@mui/material"; +import { Box, Chip, Typography, useTheme, useMediaQuery } from "@mui/material"; +import { useNavigate } from "react-router-dom"; +import { enqueueSnackbar } from "notistack"; + +import { quizApi } from "@/api/quiz"; +import { setEditQuizId } from "@root/quizes/actions"; interface Props { image: string; + quizId: number; } -export default function QuizTemplateCard({ image }: Props) { +export default function QuizTemplateCard({ image, quizId }: Props) { + const navigate = useNavigate(); const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down("md")); + + const copyTemplate = async () => { + try { + const { updated } = await quizApi.copy(quizId); + + setEditQuizId(updated); + navigate("/edit"); + } catch { + enqueueSnackbar("Ошибка создания квиза"); + } + }; return ( - + Название шаблона diff --git a/src/pages/createQuize/QuizGallery/Template.tsx b/src/pages/createQuize/QuizGallery/Template.tsx new file mode 100644 index 00000000..f0c69857 --- /dev/null +++ b/src/pages/createQuize/QuizGallery/Template.tsx @@ -0,0 +1,51 @@ +import { Box, Typography, useTheme, useMediaQuery } from "@mui/material"; +import QuizTemplateCard from "./QuizTemplateCard"; + +export type Template = { + picture: string; + quizId: number; +}; + +type TemplateProps = { + title: string; + items: Template[]; +}; + +export const Template = ({ title, items }: TemplateProps) => { + const theme = useTheme(); + const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1100)); + const isTablet = useMediaQuery(theme.breakpoints.down("md")); + + return ( + <> + + {title} + + ({items.length}) + + + {items.map(({ picture, quizId }) => ( + + ))} + + + ); +}; diff --git a/src/pages/createQuize/QuizGallery/index.tsx b/src/pages/createQuize/QuizGallery/index.tsx new file mode 100644 index 00000000..a012ebf9 --- /dev/null +++ b/src/pages/createQuize/QuizGallery/index.tsx @@ -0,0 +1,130 @@ +import { useState } from "react"; +import { + Box, + Button, + FormControl, + InputAdornment, + InputLabel, + MenuItem, + Select, + TextField, + Typography, + useTheme, +} from "@mui/material"; +import ComplexNavText from "../ComplexNavText"; +import { TourismTemplate } from "./templates/Tourism"; +import { PoolsTemplate } from "./templates/Polls"; + +import SearchIcon from "@icons/SearchIcon"; +import SectionWrapper from "@ui_kit/SectionWrapper"; +import ArrowDown from "@icons/ArrowDownIcon"; + +const categories = [ + "Категория 1", + "Категория 2", + "Категория 3", + "Категория 4", +] as const; + +type Category = (typeof categories)[number]; + +export default function QuizGallery() { + const theme = useTheme(); + const [category, setCategory] = useState(""); + + return ( + + {/*
{}} /> */} + + + Галерея квизов + + + + + + + + ), + }} + /> + + + + Категории + + + + + + + + + + Нет подходящего шаблона? + + + + ); +} diff --git a/src/pages/createQuize/QuizGallery/templates/Polls.tsx b/src/pages/createQuize/QuizGallery/templates/Polls.tsx new file mode 100644 index 00000000..c39878e5 --- /dev/null +++ b/src/pages/createQuize/QuizGallery/templates/Polls.tsx @@ -0,0 +1,18 @@ +import { Template } from "../Template"; + +import quizTemplateImage4 from "@/assets/quiz-templates/quiz-template-4.png"; +import quizTemplateImage5 from "@/assets/quiz-templates/quiz-template-5.png"; +import quizTemplateImage6 from "@/assets/quiz-templates/quiz-template-6.png"; + +export const PoolsTemplate = () => { + return ( +