fix: rating icons

2023-09-18 10:45:14 +03:00 · 2023-09-18 10:45:14 +03:00 · c7b1b8717e
commit c7b1b8717e
parent 843c8a923b
3 changed files with 94 additions and 87 deletions
--- a/src/assets/icons/questionsPage/ratingStar.tsx
+++ b/src/assets/icons/questionsPage/ratingStar.tsx
@ -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 (
-    <Box
-      sx={{
-        height: "38px",
-        width: "45px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        ...sx,
-      }}
-      onClick={onClick}
-    >
-      <svg
-        width="50"
-        height="48"
-        viewBox="0 0 50 48"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M26.0576 40.0068L38.1721 47.6836C39.7345 48.6672 41.6574 47.2038 41.2007 45.4045L37.6914 31.6342C37.5965 31.2525 37.6116 30.8518 37.7349 30.4783C37.8582 30.1048 38.0848 29.7736 38.3884 29.523L49.253 20.4787C50.6712 19.3032 49.9501 16.9282 48.0992 16.8082L33.9176 15.8966C33.5307 15.8741 33.1586 15.7396 32.847 15.5096C32.5354 15.2795 32.2977 14.9638 32.1629 14.6011L26.8749 1.31053C26.7349 0.926449 26.4799 0.594665 26.1445 0.360213C25.8091 0.125762 25.4095 0 25 0C24.5905 0 24.1909 0.125762 23.8555 0.360213C23.5201 0.594665 23.2651 0.926449 23.1251 1.31053L17.8371 14.6011C17.7023 14.9638 17.4646 15.2795 17.153 15.5096C16.8414 15.7396 16.4693 15.8741 16.0824 15.8966L1.90076 16.8082C0.0499407 16.9282 -0.671159 19.3032 0.747004 20.4787L11.6116 29.523C11.9152 29.7736 12.1418 30.1048 12.2651 30.4783C12.3884 30.8518 12.4035 31.2525 12.3086 31.6342L9.06369 44.397C8.51085 46.5561 10.8184 48.3074 12.6692 47.1318L23.9424 40.0068C24.2585 39.8061 24.6254 39.6996 25 39.6996C25.3746 39.6996 25.7415 39.8061 26.0576 40.0068Z"
-          fill="#9A9AAF"
-        />
-      </svg>
-    </Box>
-  );
-}
--- 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: <StarIconMini color={theme.palette.grey2.main} /> },
+    { name: "trophie", icon: <TropfyIcon color={theme.palette.grey2.main} /> },
+    { name: "flag", icon: <FlagIcon color={theme.palette.grey2.main} /> },
+    { name: "heart", icon: <HeartIcon color={theme.palette.grey2.main} /> },
+    { name: "like", icon: <LikeIcon color={theme.palette.grey2.main} /> },
+    {
+      name: "bubble",
+      icon: <LightbulbIcon color={theme.palette.grey2.main} />,
+    },
+    { name: "hashtag", icon: <HashtagIcon color={theme.palette.grey2.main} /> },
+  ];
+
  const SSHC = (data: string) => {
    setSwitchState(data);
  };
@ -34,44 +59,42 @@ export default function RatingOptions({ totalIndex }: Props) {
          gap: "20px",
        }}
      >
-        <Box sx={{ display: "flex", gap: "15px" }}>
-          <RatingStar
-            onClick={() => {
-              updateQuestionsList(quizId, totalIndex, {
-                content: {
-                  ...listQuestions[quizId][totalIndex].content,
-                  ratingExpanded: true,
-                },
-              });
-            }}
-            sx={{
-              cursor: "pointer",
-              ":hover": {
-                transform: "scale(1.1)",
-                transition: "0.2s",
-              },
-            }}
-          />
-          <RatingStar />
-          <RatingStar />
-          <RatingStar />
-          <RatingStar
-            onClick={() => {
-              updateQuestionsList(quizId, totalIndex, {
-                content: {
-                  ...listQuestions[quizId][totalIndex].content,
-                  ratingExpanded: true,
-                },
-              });
-            }}
-            sx={{
-              cursor: "pointer",
-              ":hover": {
-                transform: "scale(1.1)",
-                transition: "0.2s",
-              },
-            }}
-          />
+        <Box sx={{ display: "flex", gap: "25px" }}>
+          {Array.from(
+            { length: listQuestions[quizId][totalIndex].content.steps },
+            (_, index) => index
+          ).map((itemNumber) => (
+            <Box
+              {...(itemNumber === 0 ||
+              itemNumber === listQuestions[quizId][totalIndex].content.steps - 1
+                ? {
+                    onClick: () => {
+                      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
+              }
+            </Box>
+          ))}
        </Box>
        <Box
          sx={{
@ -101,7 +124,9 @@ export default function RatingOptions({ totalIndex }: Props) {
        </Box>
        {listQuestions[quizId][totalIndex].content.ratingExpanded &&
          (listQuestions[quizId][totalIndex].content.ratingDescription ? (
-            <Typography>{listQuestions[quizId][totalIndex].content.ratingDescription}</Typography>
+            <Typography>
+              {listQuestions[quizId][totalIndex].content.ratingDescription}
+            </Typography>
          ) : (
            <CustomTextField
              placeholder={"Описание"}
@ -129,7 +154,11 @@ export default function RatingOptions({ totalIndex }: Props) {
            />
          ))}
      </Box>
-      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
+      <ButtonsOptions
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
      <SwitchRating switchState={switchState} totalIndex={totalIndex} />
    </>
  );
--- 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 (
-    <Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        flexDirection: isWrappColumn ? "column" : null,
+      }}
+    >
      <Box sx={{ padding: "20px" }}>
-        <Typography sx={{ marginBottom: "15px" }}>Настройки рейтинга</Typography>
+        <Typography sx={{ marginBottom: "15px" }}>
+          Настройки рейтинга
+        </Typography>
        <Typography
          sx={{
            color: theme.palette.grey2.main,
@ -72,7 +84,10 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
                  listQuestions[quizId][totalIndex].content.form === name
                    ? theme.palette.brightPurple.main
                    : "transparent",
-                color: listQuestions[quizId][totalIndex].content.form === name ? "#ffffff" : theme.palette.grey3.main,
+                color:
+                  listQuestions[quizId][totalIndex].content.form === name
+                    ? "#ffffff"
+                    : theme.palette.grey3.main,
                width: "40px",
                height: "40px",
                borderRadius: "4px",