feat: Display modal image's caption

Author: oluwatobiss

src/ImageGallery.test.tsx

@@ -43,15 +43,13 @@ const imagesArray = [
   {
     id: crypto.randomUUID(),
     alt: "Image7's alt text",
-    caption: "Image7's description",
     src: "https://cdn.pixabay.com/photo/2023/05/25/22/07/river-8018379_1280.jpg",
     smallSrc:
       "https://cdn.pixabay.com/photo/2023/05/25/22/07/river-8018379_640.jpg",
   },
   {
     id: crypto.randomUUID(),
     alt: "Image8's alt text",
-    caption: "Image8's description",
     src: "https://cdn.pixabay.com/photo/2023/05/21/11/45/flowers-8008392_1280.jpg",
     smallSrc:
       "https://cdn.pixabay.com/photo/2023/05/21/11/45/flowers-8008392_640.jpg",

src/ImageGallery.tsx

@@ -38,6 +38,7 @@ export function ImageGallery({
   const modalToolbarBtnStyle = galleryStyles.modalToolbarBtnStyle;
   const modalSlideShowSectionStyle = galleryStyles.modalSlideShowSectionStyle;
   const modalThumbnailSectionStyle = galleryStyles.modalThumbnailSectionStyle;
+  const modalImageContainerStyle = galleryStyles.modalImageContainerStyle;
   const modalImageStyle = galleryStyles.modalImageStyle;
   const modalSlideBtnStyle = galleryStyles.modalSlideBtnStyle;
 
@@ -277,14 +278,31 @@ export function ImageGallery({
               />
             )}
           </button>
-          <img
-            src={imageSrc}
-            alt={imagesInfoArray[slideNumber - 1].alt}
-            style={{
-              height: showThumbnails ? "80vh" : "100vh",
-              ...modalImageStyle,
-            }}
-          />
+          <figure
+            style={modalImageContainerStyle}
+            onMouseEnter={(e) =>
+              fixedCaption ? undefined : handleImageContainerMouseEnter(e)
+            }
+            onMouseLeave={(e) =>
+              fixedCaption ? undefined : handleImageContainerMouseLeave(e)
+            }
+          >
+            <img
+              src={imageSrc}
+              alt={imagesInfoArray[slideNumber - 1].alt}
+              style={{
+                height: showThumbnails ? "80vh" : "100vh",
+                ...modalImageStyle,
+              }}
+            />
+            {imagesInfoArray[slideNumber - 1].caption ? (
+              <figcaption style={imageCaptionStyle}>
+                {imagesInfoArray[slideNumber - 1].caption}
+              </figcaption>
+            ) : (
+              ""
+            )}
+          </figure>
           <button
             type="button"
             aria-label="Next image"

src/ImageGallery.types.tsx

@@ -10,6 +10,7 @@ export interface ImageGalleryStylesType {
   modalToolbarBtnStyle?: React.CSSProperties;
   modalSlideShowSectionStyle?: React.CSSProperties;
   modalThumbnailSectionStyle?: React.CSSProperties;
+  modalImageContainerStyle?: React.CSSProperties;
   modalImageStyle?: React.CSSProperties;
   modalSlideBtnStyle?: React.CSSProperties;
 }

src/ImageGalleryStyles.ts

@@ -92,6 +92,9 @@ export function imageGalleryStyles(
     width: "inherit",
     transition: "height .7s linear",
   };
+  const modalImageContainerStyle: React.CSSProperties = {
+    width: "inherit",
+  };
   const modalImageStyle: React.CSSProperties = {
     margin: "auto",
     maxWidth: "100vw",
@@ -128,6 +131,7 @@ export function imageGalleryStyles(
     modalToolbarBtnStyle,
     modalSlideShowSectionStyle,
     modalThumbnailSectionStyle,
+    modalImageContainerStyle,
     modalImageStyle,
     modalSlideBtnStyle,
   };