1  // SPDX-FileCopyrightText: 2022-present deepset GmbH <info@deepset.ai>
 2  //
 3  // SPDX-License-Identifier: Apache-2.0
 4  
 5  import React, { useState } from 'react';
 6  import Image from '@theme/IdealImage';
 7  import useBaseUrl from '@docusaurus/useBaseUrl';
 8  import styles from './styles.module.css';
 9  
10  interface ClickableImageProps {
11    src: string; // must start with /img/
12    alt?: string;
13    className?: string;
14    size?: 'standard' | 'large';
15  }
16  
17  export default function ClickableImage({
18    src,
19    alt = '',
20    className,
21    size = 'standard',
22  }: ClickableImageProps) {
23    const [isZoomed, setZoomed] = useState(false);
24    const imageUrl = useBaseUrl(src);
25    const toggleZoom = () => setZoomed(!isZoomed);
26    const sizeClass = size === 'large' ? styles.imgLarge : styles.imgStandard;
27  
28    return (
29      <>
30        <div
31          className={`${styles.imageWrapper} ${className || ''}`}
32          onClick={toggleZoom}
33          role="button"
34          aria-pressed={isZoomed}
35          title="Click to enlarge"
36        >
37          <Image
38            img={imageUrl}
39            alt={alt}
40            className={`${styles.zoomable} ${sizeClass}`}
41          />
42        </div>
43  
44        {isZoomed && (
45          <div className={styles.overlay} onClick={toggleZoom}>
46            <img src={imageUrl} alt={alt} className={styles.zoomedImage} />
47          </div>
48        )}
49      </>
50    );
51  }