🐛 fix(ZoomableImage.js): add style prop to ZoomableImage component to allow custom styling

✨ feat(ZoomableImage.js): add default style to ZoomableImage component for consistent layout and centering of images

docs/src/theme/ZoomableImage.js

@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import ThemedImage from '@theme/ThemedImage';
+import ThemedImage from "@theme/ThemedImage";
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import useBaseUrl from "@docusaurus/useBaseUrl";
 
-const ZoomableImage = ({ alt, sources }) => {
+const ZoomableImage = ({ alt, sources, style }) => {
+  // add style here
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   const toggleFullscreen = () => {
@@ -10,27 +11,36 @@ const ZoomableImage = ({ alt, sources }) => {
   };
 
   const handleKeyPress = (event) => {
-    if (event.key === 'Escape') {
+    if (event.key === "Escape") {
       setIsFullscreen(false);
     }
   };
 
   useEffect(() => {
     if (isFullscreen) {
-      document.addEventListener('keydown', handleKeyPress);
+      document.addEventListener("keydown", handleKeyPress);
     } else {
-      document.removeEventListener('keydown', handleKeyPress);
+      document.removeEventListener("keydown", handleKeyPress);
     }
 
     return () => {
-      document.removeEventListener('keydown', handleKeyPress);
+      document.removeEventListener("keydown", handleKeyPress);
     };
   }, [isFullscreen]);
 
+  // Default style
+  const defaultStyle = {
+    width: "50%",
+    margin: "0 auto",
+    display: "flex",
+    justifyContent: "center",
+  };
+
   return (
     <div
-      className={`zoomable-image ${isFullscreen ? 'fullscreen' : ''}`}
+      className={`zoomable-image ${isFullscreen ? "fullscreen" : ""}`}
       onClick={toggleFullscreen}
+      style={{ ...defaultStyle, ...style }}
     >
       <ThemedImage
         className="zoomable-image-inner"