From 6e402b610a14cb65ce4057705c953e63bf2d4e84 Mon Sep 17 00:00:00 2001
From: balogunofafrica <balogunakanbi.k@gmail.com>
Date: Thu, 21 Sep 2023 09:40:55 +0100
Subject: [PATCH] fix: click to expand on image

---
 src/components/home/MediaScreen.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/home/MediaScreen.tsx b/src/components/home/MediaScreen.tsx
index 388021a2..21d8b7ee 100644
--- a/src/components/home/MediaScreen.tsx
+++ b/src/components/home/MediaScreen.tsx
@@ -1,4 +1,5 @@
 import { Box, Icon } from "@chakra-ui/react";
+import Image from "next/image";
 import React, { useEffect, useRef, useState } from "react";
 import { BiX } from "react-icons/bi";
 import HomeMediaPortal from "./HomeMediaPortal";
@@ -7,7 +8,7 @@ const MediaScreen = ({
   mediaElement,
   wrapperId = "home-media-viewer",
 }: {
-  mediaElement: React.ReactNode;
+  mediaElement: React.JSX.Element;
   wrapperId?: string;
 }) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
@@ -89,9 +90,14 @@ const MediaScreen = ({
               onClick={disableFullScreen}
               w="100%"
               h="100%"
-            ></Box>
+            />
             <Box pos="absolute" maxW="100%" maxH="100%" p={4} display="flex">
-              {mediaElement}
+              {React.cloneElement<React.ComponentProps<typeof Image>>(
+                mediaElement,
+                {
+                  width: 1000,
+                }
+              )}
             </Box>
             <CloseButton handleClose={disableFullScreen} />
           </Box>