diff --git a/src/App.tsx b/src/App.tsx
index f092e854..dea42552 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -47,6 +47,7 @@ import { Restore } from "./pages/startPage/Restore";
import { isAxiosError } from "axios";
import { useEffect, useLayoutEffect, useRef } from "react";
+import { QuizAnswersPage } from "./pages/QuizAnswersPage/QuizAnswersPage";
export function useUserAccountFetcher({
onError,
onNewUserAccount,
@@ -209,6 +210,7 @@ export default function App() {
} />
} />
} />
+ } />
}>
{routeslink.map((e, i) => (
{
+ const [isOpen, setIsOpen] = useState(false);
+ const theme = useTheme();
+ const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+ return (
+ setIsOpen(!isOpen)}
+ sx={{
+ maxWidth: isTablet ? "450px" : "auto",
+ width: "100%",
+ display: "flex",
+ justifyContent: "space-between",
+ flexDirection: isTablet ? "column" : "-moz-initial",
+ }}
+ >
+
+
+
+
+ 1
+
+
+
+
+
+ Сегодня в 18:59 Россия, Москва
+
+
+
+
+
+
+
+ Екатерина
+
+
+
+
+
+ exampleemail@gmail.com
+
+
+
+
+
+ +79876543210
+
+
+
+
+ {!isTablet && (
+
+ Новая
+
+ )}
+
+
+
+ {isTablet ? (
+ <>
+
+ Новая
+
+
+
+
+
+
+
+ ) : (
+
+ )}
+
+
+ {isOpen && (
+
+
+
+ Ответы
+
+
+
+
+
+
+
+ 1.
+
+
+ Ответ на 1 вопрос
+
+
+
+
+ 2.
+
+ 
+
+
+
+ 3.
+
+
+ ответ.doc
+
+
+
+
+ 4.
+
+
+ Ответ на 4 вопрос
+
+
+
+
+ 5.
+
+
+ Ответ на 5 вопрос
+
+
+
+
+ 6.
+
+
+ Ответ на 6 вопрос
+
+
+
+
+
+
+
+ 7.
+
+
+ Ответ на 7 вопрос
+
+
+
+
+
+ 8.
+
+
+ Ответ на 8 вопрос
+
+
+
+
+ 9.
+
+
+ Ответ на 9 вопрос
+
+
+
+
+ 10.
+
+ 
+
+
+
+
+
+
+ Результаты
+
+
+
+
+
+ Заголовок
+
+ Текст
+
+
+
+ )}
+
+ );
+};
diff --git a/src/pages/QuizAnswersPage/QuizAnswersPage.tsx b/src/pages/QuizAnswersPage/QuizAnswersPage.tsx
new file mode 100644
index 00000000..44d60f98
--- /dev/null
+++ b/src/pages/QuizAnswersPage/QuizAnswersPage.tsx
@@ -0,0 +1,188 @@
+import {
+ Box,
+ Button,
+ IconButton,
+ Typography,
+ useTheme,
+ useMediaQuery,
+} from "@mui/material";
+import HeaderFull from "@ui_kit/Header/HeaderFull";
+import SectionWrapper from "@ui_kit/SectionWrapper";
+import { FC, useState } from "react";
+import { FileExportIcon } from "./icons/FileExporIcon";
+import { UpdateIcon } from "./icons/UpdateIcon";
+import { Select } from "../../pages/Questions/Select";
+import { CheckboxSelect } from "../../ui_kit/CheckboxSelect";
+import { CardAnswer } from "./CardAnswer";
+import { FilterIcon } from "./icons/FilterIcon";
+
+const options = [
+ { label: "Муром (1)", value: "option1" },
+ { label: "Москва (1)", value: "option2" },
+];
+
+export const QuizAnswersPage: FC = () => {
+ const theme = useTheme();
+ const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+ return (
+
+
+
+
+ Заголовок квиза
+
+
+
+
+
+ Ответы на квиз
+
+
+ (1)
+
+
+
+
+
+
+
+
+
+
+
+
+ {isTablet && (
+
+
+
+ )}
+
+
+ {!isTablet && (
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ {!isTablet && (
+
+
+ № заявки
+
+
+ Дата
+
+
+ Контакты
+
+
+ )}
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/QuizAnswersPage/icons/ContactIcon.tsx b/src/pages/QuizAnswersPage/icons/ContactIcon.tsx
new file mode 100644
index 00000000..549200a0
--- /dev/null
+++ b/src/pages/QuizAnswersPage/icons/ContactIcon.tsx
@@ -0,0 +1,23 @@
+export const ContactIcon = () => (
+
+);
diff --git a/src/pages/QuizAnswersPage/icons/EyeIcon.tsx b/src/pages/QuizAnswersPage/icons/EyeIcon.tsx
new file mode 100644
index 00000000..d4b309aa
--- /dev/null
+++ b/src/pages/QuizAnswersPage/icons/EyeIcon.tsx
@@ -0,0 +1,16 @@
+export const EyeIcon = () => (
+
+);
diff --git a/src/pages/QuizAnswersPage/icons/FileExporIcon.tsx b/src/pages/QuizAnswersPage/icons/FileExporIcon.tsx
new file mode 100644
index 00000000..d3a5cf3e
--- /dev/null
+++ b/src/pages/QuizAnswersPage/icons/FileExporIcon.tsx
@@ -0,0 +1,24 @@
+export const FileExportIcon = () => (
+
+);
diff --git a/src/pages/QuizAnswersPage/icons/FilterIcon.tsx b/src/pages/QuizAnswersPage/icons/FilterIcon.tsx
new file mode 100644
index 00000000..3518bdc9
--- /dev/null
+++ b/src/pages/QuizAnswersPage/icons/FilterIcon.tsx
@@ -0,0 +1,15 @@
+export const FilterIcon = () => (
+
+);
diff --git a/src/pages/QuizAnswersPage/icons/MessageIcon.tsx b/src/pages/QuizAnswersPage/icons/MessageIcon.tsx
new file mode 100644
index 00000000..b95047ec
--- /dev/null
+++ b/src/pages/QuizAnswersPage/icons/MessageIcon.tsx
@@ -0,0 +1,27 @@
+export const MessageIcon = () => (
+
+);
diff --git a/src/pages/QuizAnswersPage/icons/PhoneIcon.tsx b/src/pages/QuizAnswersPage/icons/PhoneIcon.tsx
new file mode 100644
index 00000000..5d762154
--- /dev/null
+++ b/src/pages/QuizAnswersPage/icons/PhoneIcon.tsx
@@ -0,0 +1,16 @@
+export const PhoneIcon = () => (
+
+);
diff --git a/src/pages/QuizAnswersPage/icons/UpdateIcon.tsx b/src/pages/QuizAnswersPage/icons/UpdateIcon.tsx
new file mode 100644
index 00000000..752397f7
--- /dev/null
+++ b/src/pages/QuizAnswersPage/icons/UpdateIcon.tsx
@@ -0,0 +1,16 @@
+export const UpdateIcon = () => (
+
+);
diff --git a/src/pages/QuizAnswersPage/images/home.png b/src/pages/QuizAnswersPage/images/home.png
new file mode 100644
index 00000000..f10be8a2
Binary files /dev/null and b/src/pages/QuizAnswersPage/images/home.png differ
diff --git a/src/pages/QuizAnswersPage/images/videoFrame.png b/src/pages/QuizAnswersPage/images/videoFrame.png
new file mode 100644
index 00000000..f6898f33
Binary files /dev/null and b/src/pages/QuizAnswersPage/images/videoFrame.png differ
diff --git a/src/ui_kit/CheckboxSelect.tsx b/src/ui_kit/CheckboxSelect.tsx
new file mode 100644
index 00000000..d50c0904
--- /dev/null
+++ b/src/ui_kit/CheckboxSelect.tsx
@@ -0,0 +1,130 @@
+import React, { useState } from "react";
+import {
+ FormControl,
+ MenuItem,
+ Select,
+ Checkbox,
+ ListItemText,
+ SelectChangeEvent,
+} from "@mui/material";
+import ArrowDown from "@icons/ArrowDownIcon";
+
+type CheckboxSelectProps = {
+ options: { label: string; value: string }[];
+ sx?: any;
+ placeholder: string;
+};
+
+export const CheckboxSelect: React.FC = ({
+ options,
+ sx,
+ placeholder,
+}: CheckboxSelectProps) => {
+ const [selectedValues, setSelectedValues] = useState([]);
+
+ const handleChange = (event: SelectChangeEvent) => {
+ const values = event.target.value as string[];
+
+ if (values.includes("SelectAll")) {
+ setSelectedValues(options.map((option) => option.value));
+ } else {
+ setSelectedValues(values);
+ }
+ };
+
+ return (
+
+
+
+ );
+};