diff --git a/src/assets/icons/questionsPage/ratingStar.tsx b/src/assets/icons/questionsPage/ratingStar.tsx
deleted file mode 100644
index 9c38fccc..00000000
--- a/src/assets/icons/questionsPage/ratingStar.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Box } from "@mui/material";
-
-import type { SxProps } from "@mui/material";
-
-interface Props {
- sx?: SxProps;
- onClick?: () => void;
-}
-
-export default function RatingStar({ sx, onClick }: Props) {
- return (
-
-
-
- );
-}
diff --git a/src/pages/Questions/RatingOptions/RatingOptions.tsx b/src/pages/Questions/RatingOptions/RatingOptions.tsx
index 343f667f..27aa1e34 100644
--- a/src/pages/Questions/RatingOptions/RatingOptions.tsx
+++ b/src/pages/Questions/RatingOptions/RatingOptions.tsx
@@ -2,15 +2,27 @@ import { useState } from "react";
import { useParams } from "react-router-dom";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
-import RatingStar from "../../../assets/icons/questionsPage/ratingStar";
import SwitchRating from "./switchRating";
import { questionStore, updateQuestionsList } from "@root/questions";
import CustomTextField from "@ui_kit/CustomTextField";
+import TropfyIcon from "../../../assets/icons/questionsPage/tropfyIcon";
+import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon";
+import HeartIcon from "../../../assets/icons/questionsPage/heartIcon";
+import LikeIcon from "../../../assets/icons/questionsPage/likeIcon";
+import LightbulbIcon from "../../../assets/icons/questionsPage/lightbulbIcon";
+import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
+import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
+
interface Props {
totalIndex: number;
}
+export type ButtonRatingFrom = {
+ name: string;
+ icon: JSX.Element;
+};
+
export default function RatingOptions({ totalIndex }: Props) {
const [switchState, setSwitchState] = useState("setting");
const quizId = Number(useParams().quizId);
@@ -18,6 +30,19 @@ export default function RatingOptions({ totalIndex }: Props) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
+ const buttonRatingForm: ButtonRatingFrom[] = [
+ { name: "star", icon: },
+ { name: "trophie", icon: },
+ { name: "flag", icon: },
+ { name: "heart", icon: },
+ { name: "like", icon: },
+ {
+ name: "bubble",
+ icon: ,
+ },
+ { name: "hashtag", icon: },
+ ];
+
const SSHC = (data: string) => {
setSwitchState(data);
};
@@ -34,44 +59,42 @@ export default function RatingOptions({ totalIndex }: Props) {
gap: "20px",
}}
>
-
- {
- updateQuestionsList(quizId, totalIndex, {
- content: {
- ...listQuestions[quizId][totalIndex].content,
- ratingExpanded: true,
- },
- });
- }}
- sx={{
- cursor: "pointer",
- ":hover": {
- transform: "scale(1.1)",
- transition: "0.2s",
- },
- }}
- />
-
-
-
- {
- updateQuestionsList(quizId, totalIndex, {
- content: {
- ...listQuestions[quizId][totalIndex].content,
- ratingExpanded: true,
- },
- });
- }}
- sx={{
- cursor: "pointer",
- ":hover": {
- transform: "scale(1.1)",
- transition: "0.2s",
- },
- }}
- />
+
+ {Array.from(
+ { length: listQuestions[quizId][totalIndex].content.steps },
+ (_, index) => index
+ ).map((itemNumber) => (
+ {
+ updateQuestionsList(quizId, totalIndex, {
+ content: {
+ ...listQuestions[quizId][totalIndex].content,
+ ratingExpanded: true,
+ },
+ });
+ },
+ sx: {
+ cursor: "pointer",
+ transform: "scale(1.5)",
+ ":hover": {
+ transform: "scale(1.7)",
+ transition: "0.2s",
+ },
+ },
+ }
+ : { sx: { transform: "scale(1.5)" } })}
+ >
+ {
+ buttonRatingForm.find(
+ ({ name }) =>
+ listQuestions[quizId][totalIndex].content.form === name
+ )?.icon
+ }
+
+ ))}
{listQuestions[quizId][totalIndex].content.ratingExpanded &&
(listQuestions[quizId][totalIndex].content.ratingDescription ? (
- {listQuestions[quizId][totalIndex].content.ratingDescription}
+
+ {listQuestions[quizId][totalIndex].content.ratingDescription}
+
) : (
))}
-
+
);
diff --git a/src/pages/Questions/RatingOptions/settingRating.tsx b/src/pages/Questions/RatingOptions/settingRating.tsx
index 879ff8ef..8cd11fa9 100644
--- a/src/pages/Questions/RatingOptions/settingRating.tsx
+++ b/src/pages/Questions/RatingOptions/settingRating.tsx
@@ -1,5 +1,12 @@
import { useParams } from "react-router-dom";
-import { Box, ButtonBase, Slider, Typography, useMediaQuery, useTheme } from "@mui/material";
+import {
+ Box,
+ ButtonBase,
+ Slider,
+ Typography,
+ useMediaQuery,
+ useTheme,
+} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
@@ -14,15 +21,12 @@ import LightbulbIcon from "../../../assets/icons/questionsPage/lightbulbIcon";
import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
+import type { ButtonRatingFrom } from "./RatingOptions";
+
type SettingSliderProps = {
totalIndex: number;
};
-type ButtonRatingFrom = {
- name: string;
- icon: JSX.Element;
-};
-
export default function SettingSlider({ totalIndex }: SettingSliderProps) {
const quizId = Number(useParams().quizId);
const theme = useTheme();
@@ -44,9 +48,17 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
];
return (
-
+
- Настройки рейтинга
+
+ Настройки рейтинга
+