Issueid #0000 feat: zoom in and out feature enable for fillintheblanks

Sunbird-ALL · Nov 4, 2024 · 9383e69 · 9383e69
1 parent 7768ad4
commit 9383e69
Showing 1 changed file with 93 additions and 11 deletions.
diff --git a/src/components/Practice/Mechanics3.jsx b/src/components/Practice/Mechanics3.jsx
@@ -15,6 +15,9 @@ import correctSound from "../../assets/audio/correct.wav";
 import wrongSound from "../../assets/audio/wrong.wav";
 import removeSound from "../../assets/audio/remove.wav";
 import VoiceAnalyser from "../../utils/VoiceAnalyser";
+import { Modal } from "@mui/material";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import CloseIcon from "@mui/icons-material/Close";
 
 const Mechanics2 = ({
   page,
@@ -54,7 +57,7 @@ const Mechanics2 = ({
 }) => {
   const [words, setWords] = useState([]);
   const [sentences, setSentences] = useState([]);
-
+  const [zoomOpen, setZoomOpen] = useState(false);
   const [selectedWord, setSelectedWord] = useState("");
   // const [loading, setLoading] = useState(false);
   const [shake, setShake] = useState(false);
@@ -255,17 +258,96 @@ const Mechanics2 = ({
                 },
               }}
             >
-              {image && (
-                <img
-                  src={image}
-                  style={{
-                    borderRadius: "20px",
-                    maxWidth: "100%",
-                    height: "clamp(150px, 20vw, 220px)",
+              <Box sx={{ position: "relative", cursor: "zoom-in" }}>
+                {image && (
+                  <img
+                    src={image}
+                    style={{
+                      borderRadius: "20px",
+                      maxWidth: "100%",
+                      height: "clamp(150px, 20vw, 220px)",
+                    }}
+                    alt=""
+                  />
+                )}
+
+                {/* 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",
                   }}
-                  alt=""
-                />
-              )}
+                >
+                  {/* Zoom icon positioned in the top-left corner */}
+                  <ZoomInIcon
+                    onClick={() => setZoomOpen(true)}
+                    sx={{ color: "white", fontSize: "22px", cursor: "pointer" }}
+                  />
+                </Box>
+              </Box>
+              <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>
 
             <Box