|
2 | 2 | import React, { useState } from "react"; |
3 | 3 | import styles from "./CaptionedImage.module.css"; |
4 | 4 |
|
5 | | -const CaptionedImage = ({ src, alt, title, width, inset = "0%", zoom = false }) => { |
| 5 | +const CaptionedImage = ({ src, srcDark, alt, title, width, inset = "0%", zoom = false }) => { |
6 | 6 | const [isZoomed, setIsZoomed] = useState(false); |
7 | | - const isSVG = src.endsWith(".svg"); |
8 | 7 |
|
9 | 8 | const toggleZoom = () => { |
10 | | - if (zoom) { // Only toggle zoom if zoom prop is true |
| 9 | + if (zoom) { |
11 | 10 | setIsZoomed(!isZoomed); |
12 | 11 | } |
13 | 12 | }; |
14 | 13 |
|
| 14 | + const imgStyle = { |
| 15 | + width: isZoomed && zoom ? "auto" : "100%", |
| 16 | + height: "auto", |
| 17 | + maxWidth: isZoomed && zoom ? "none" : "100%", |
| 18 | + maxHeight: isZoomed && zoom ? "none" : "auto", |
| 19 | + objectFit: "contain", |
| 20 | + transition: "transform 0.3s ease-in-out", |
| 21 | + }; |
| 22 | + |
15 | 23 | return ( |
16 | 24 | <div |
17 | 25 | className={styles.imageContainer} |
18 | 26 | style={{ |
19 | 27 | width: width || "auto", |
20 | 28 | paddingLeft: inset, |
21 | 29 | paddingRight: inset, |
22 | | - cursor: zoom ? "pointer" : "default", // Change cursor if zoom is enabled |
23 | | - position: "relative", // Keep the container in its normal position |
24 | | - display: "inline-block", // Keep image in line with text |
| 30 | + cursor: zoom ? "pointer" : "default", |
| 31 | + position: "relative", |
| 32 | + display: "inline-block", |
25 | 33 | }} |
26 | | - onClick={toggleZoom} // Toggle zoom on image container click if zoom is true |
| 34 | + onClick={toggleZoom} |
27 | 35 | > |
28 | | - <img |
29 | | - src={src} |
30 | | - alt={alt || title} |
31 | | - className={styles.image} |
32 | | - style={{ |
33 | | - width: isZoomed && zoom ? "auto" : "100%", // Zoomed image behavior (only if zoom is true) |
34 | | - height: isZoomed && zoom ? "auto" : "auto", // Keep height as auto to preserve aspect ratio |
35 | | - maxWidth: isZoomed && zoom ? "none" : "100%", // Allow the image to exceed its container when zoomed (only if zoom is true) |
36 | | - maxHeight: isZoomed && zoom ? "none" : "auto", // Allow the image to exceed its container when zoomed (only if zoom is true) |
37 | | - objectFit: "contain", // Preserve aspect ratio for zoomed image |
38 | | - transition: "transform 0.3s ease-in-out", // Smooth zoom transition |
39 | | - }} |
40 | | - /> |
| 36 | + {srcDark ? ( |
| 37 | + <> |
| 38 | + <img |
| 39 | + src={src} |
| 40 | + alt={alt || title} |
| 41 | + className={`${styles.image} ${styles.lightOnly}`} |
| 42 | + style={imgStyle} |
| 43 | + /> |
| 44 | + <img |
| 45 | + src={srcDark} |
| 46 | + alt={alt || title} |
| 47 | + className={`${styles.image} ${styles.darkOnly}`} |
| 48 | + style={imgStyle} |
| 49 | + /> |
| 50 | + </> |
| 51 | + ) : ( |
| 52 | + <img |
| 53 | + src={src} |
| 54 | + alt={alt || title} |
| 55 | + className={styles.image} |
| 56 | + style={imgStyle} |
| 57 | + /> |
| 58 | + )} |
41 | 59 | {title && <p className={styles.title}>{title}</p>} |
42 | 60 | </div> |
43 | 61 | ); |
|
0 commit comments