From 559778d4b62f394c96d65ac0f3f2548117239b8f Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 28 Jul 2023 09:29:18 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(ZoomableImage.js):=20add=20s?=
 =?UTF-8?q?tyle=20prop=20to=20ZoomableImage=20component=20to=20allow=20cus?=
 =?UTF-8?q?tom=20styling=20=E2=9C=A8=20feat(ZoomableImage.js):=20add=20def?=
 =?UTF-8?q?ault=20style=20to=20ZoomableImage=20component=20for=20consisten?=
 =?UTF-8?q?t=20layout=20and=20centering=20of=20images?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/src/theme/ZoomableImage.js | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/docs/src/theme/ZoomableImage.js b/docs/src/theme/ZoomableImage.js
index 750066bb7..aeeb0454a 100644
--- a/docs/src/theme/ZoomableImage.js
+++ b/docs/src/theme/ZoomableImage.js
@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import ThemedImage from '@theme/ThemedImage';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import React, { useState, useEffect } from "react";
+import ThemedImage from "@theme/ThemedImage";
+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"