add zoom in zoom out button

src/components/ImageView/ImageView.jsx

@@ -9,6 +9,8 @@ import {
 } from "@mui/material";
 import Grid from '@mui/material/Grid2';
 import CloseIcon from "@mui/icons-material/Close";
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import defaultImage from "../../assets/images/default.png";
 import { Carousel } from 'react-responsive-carousel';
 
@@ -21,6 +23,7 @@ const ImageView = () => {
 
   const [previewImage, setPreviewImage] = useState("");
   const [isZoomed, setIsZoomed] = useState(false);
+  const [zoomSize, setZoomSize] = useState(100)
   const [currentIndex, setCurrentIndex] = useState(0);
 
   useEffect(() => {
@@ -43,6 +46,17 @@ const ImageView = () => {
     setPreviewImage(product?.images[index]?.url)
   };
 
+  const onZoomIn = () => {
+    if (zoomSize > 310) return
+    setZoomSize(zoomSize + 20)
+  }
+
+  const onZoomOut = () => {
+    if (zoomSize < 40) return
+    setZoomSize(zoomSize - 20)
+  }
+
+
   return (
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2}>
@@ -60,7 +74,15 @@ const ImageView = () => {
             }}
           >
 
-            <Carousel showStatus={false} showIndicators={false} onClickItem={() => { handleZoomToggle() }} onChange={(index) => handleSlideChange(index)} selectedItem={currentIndex}>
+            <Carousel
+              showStatus={false}
+              showIndicators={false}
+              onClickItem={() => {
+                handleZoomToggle()
+                setZoomSize(100)
+              }}
+              onChange={(index) => handleSlideChange(index)}
+              selectedItem={currentIndex}>
               {product?.images?.map(({ src, url }, index) => (
                 <Box
                   key={index}
@@ -106,7 +128,7 @@ const ImageView = () => {
                   setCurrentIndex(index)
                 }}
                 sx={{
-                  p:0.4,
+                  p: 0.4,
                   borderRadius: 1,
                   backgroundColor: (previewImage == url) ? "#95AAC5" : "none"
                 }}
@@ -128,12 +150,13 @@ const ImageView = () => {
       </Grid>
 
       {/* Zoom Dialog */}
-      <Dialog open={isZoomed} onClose={handleZoomToggle} maxWidth="lg">
+      <Dialog fullScreen open={isZoomed} onClose={handleZoomToggle} maxWidth="lg">
         <DialogContent
           sx={{
             position: "relative",
             overflow: "hidden", // Prevent scrolling on DialogContent
             height: "90vh", // Adjust height as needed
+            p: 0
           }}
         >
           {/* Fixed position close button */}
@@ -143,7 +166,11 @@ const ImageView = () => {
               height: 50,
               position: "absolute",
               top: 10,
-              right: 1.5,
+              right: {
+                xs: 1.5,
+                sm: 1.5,
+                md: 10
+              },
               zIndex: 2, // Ensure it stays above other content
             }}
           >
@@ -159,6 +186,32 @@ const ImageView = () => {
             >
               <CloseIcon />
             </IconButton>
+            <IconButton
+              onClick={onZoomIn}
+              sx={{
+                backgroundColor: "white",
+                color: "black",
+                mt: 1,
+                "&:hover": {
+                  backgroundColor: "lightgray",
+                },
+              }}
+            >
+              <ZoomInIcon />
+            </IconButton>
+            <IconButton
+              onClick={onZoomOut}
+              sx={{
+                backgroundColor: "white",
+                color: "black",
+                mt: 1,
+                "&:hover": {
+                  backgroundColor: "lightgray",
+                },
+              }}
+            >
+              <ZoomOutIcon />
+            </IconButton>
           </Box>
 
           {/* Scrollable content */}
@@ -166,13 +219,15 @@ const ImageView = () => {
             sx={{
               overflow: "auto", // Allow scrolling within this Box
               height: "100%", // Fill available height of DialogContent
+              display: "flex"
             }}
           >
             <img
               src={previewImage || defaultImage}
               alt="Zoomed Preview"
               style={{
-                width: "100%",
+                width: `${zoomSize}%`,
+                margin: "auto auto",
                 height: "auto",
               }}
             />