varimg имеет кнопку удаления

lib/components/ViewPublicationPage/questions/Varimg/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, ButtonBase, RadioGroup, Typography, useTheme } from "@mui/material";
+import { Box, ButtonBase, RadioGroup, Typography, useTheme, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 
 import { VarimgVariant } from "./VarimgVariant";
 import { OwnVarimgImage } from "./OwnVarimgImage";
@@ -76,6 +77,15 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
     }
   };
 
+  const handleRemoveImage = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (ownVariantData) {
+      // Сохраняем текущий answer, очищаем только изображения
+      const currentAnswer = ownVariantData.variant.answer || "";
+      updateOwnVariant(ownVariantData.id, currentAnswer, "", "", "");
+    }
+  };
+
   if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question");
 
   return (
@@ -162,6 +172,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
             backgroundColor: "#9A9AAF30",
             color: theme.palette.text.primary,
             textAlign: "center",
+            position: "relative",
             "&:hover": {
               backgroundColor: ownVariantInQuestion ? "rgba(0,0,0,0.04)" : "transparent",
             },
@@ -172,12 +183,34 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
               const imageUrl = variant?.isOwn && ownImageUrl ? ownImageUrl : choiceImgUrlAnswer;
               if (imageUrl) {
                 return (
-                  <img
-                    key={imageUrl}
-                    src={imageUrl}
-                    style={{ width: "100%", height: "100%", objectFit: "cover" }}
-                    alt=""
-                  />
+                  <>
+                    <img
+                      key={imageUrl}
+                      src={imageUrl}
+                      style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                      alt=""
+                    />
+                    {variant?.isOwn && ownImageUrl && (
+                      <IconButton
+                        onClick={handleRemoveImage}
+                        sx={{
+                          position: "absolute",
+                          top: 8,
+                          left: 8,
+                          zIndex: 1,
+                          backgroundColor: "rgba(0, 0, 0, 0.5)",
+                          color: "white",
+                          height: "25px",
+                          width: "25px",
+                          "&:hover": {
+                            backgroundColor: "rgba(0, 0, 0, 0.7)",
+                          },
+                        }}
+                      >
+                        <CloseIcon />
+                      </IconButton>
+                    )}
+                  </>
                 );
               }
               return <BlankImage />;