Issue #zoomicon changes for images

Sunbird-ALL · Oct 30, 2024 · bd17773 · bd17773
1 parent 2617f1a
commit bd17773
Showing 1 changed file with 98 additions and 6 deletions.
diff --git a/src/components/Practice/Mechanics5.jsx b/src/components/Practice/Mechanics5.jsx
@@ -4,6 +4,9 @@ import MainLayout from "../Layouts.jsx/MainLayout";
 import { PlayAudioButton, StopAudioButton } from "../../utils/constants";
 import VoiceAnalyser from "../../utils/VoiceAnalyser";
 import PropTypes from "prop-types";
+import { Modal } from "@mui/material";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import CloseIcon from "@mui/icons-material/Close";
 
 const Mechanics5 = ({
   background,
@@ -54,6 +57,7 @@ const Mechanics5 = ({
   const audiosRef = useRef(
     new Array(options.length).fill(null).map(() => React.createRef())
   );
+  const [zoomOpen, setZoomOpen] = useState(false);
   const questionAudioRef = useRef();
   const [playingIndex, setPlayingIndex] = useState(null);
   const [selectedOption, setSelectedOption] = useState(null); // Add state to track selected radio button
@@ -179,13 +183,101 @@ const Mechanics5 = ({
         container
         sx={{ width: "80%", justifyContent: "center", mb: 2, mt: 8 }}
       >
-        <Grid item xs={4}>
-          <img
-            src={image}
-            style={{ borderRadius: "20px", maxWidth: "100%", height: "250px" }}
-            alt=""
-          />
+        <Grid item xs={4} position="relative">
+          {/* Image with full-width gradient overlay on top */}
+          <Box sx={{ position: "relative", cursor: "zoom-in" }}>
+            <img
+              src={image}
+              style={{
+                borderRadius: "20px",
+                maxWidth: "100%",
+                height: "250px",
+              }}
+              alt="contentImage"
+              onClick={() => setZoomOpen(true)} // Open modal on click
+            />
+
+            {/* Subtle gradient overlay across the top */}
+            <Box
+              sx={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                height: "40px", // Height of the gradient overlay
+                background:
+                  "linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent)",
+                borderTopLeftRadius: "20px",
+                borderTopRightRadius: "20px",
+                display: "flex",
+                alignItems: "center",
+                paddingLeft: "8px",
+              }}
+            >
+              {/* Zoom icon positioned in the top-left corner */}
+              <ZoomInIcon
+                onClick={() => setZoomOpen(true)}
+                sx={{ color: "white", fontSize: "22px", cursor: "pointer" }}
+              />
+            </Box>
+          </Box>
+
+          {/* Modal for zoomed image with gradient and close icon */}
+          <Modal
+            open={zoomOpen}
+            onClose={() => setZoomOpen(false)}
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Box sx={{ position: "relative", outline: "none" }}>
+              {/* Subtle gradient overlay at the top of the zoomed image */}
+              <Box
+                sx={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  height: "40px", // Adjust height as needed
+                  background:
+                    "linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "flex-end",
+                  paddingRight: "8px",
+                  borderTopLeftRadius: "8px",
+                  borderTopRightRadius: "8px",
+                }}
+              >
+                {/* Close icon positioned within the gradient overlay */}
+                <CloseIcon
+                  onClick={() => setZoomOpen(false)}
+                  sx={{
+                    color: "white",
+                    fontSize: "24px",
+                    cursor: "pointer",
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    borderRadius: "50%",
+                    padding: "4px",
+                  }}
+                />
+              </Box>
+
+              <img
+                src={image}
+                alt="Zoomed content"
+                style={{
+                  maxWidth: "90vw",
+                  maxHeight: "90vh",
+                  borderRadius: "8px",
+                }}
+              />
+            </Box>
+          </Modal>
         </Grid>
+
         <Grid item xs={8} paddingLeft={2}>
           <Box paddingBottom={3} sx={{ display: "flex" }}>
             <audio