Function ZoomImageModal

packages/gitbook/src/components/utils/ZoomImage.tsx:171–254

(props: {
    src: string;
    alt: string;
    crossOrigin: React.ComponentPropsWithoutRef<'img'>['crossOrigin'];
    onClose: () => void;
})

}

function ZoomImageModal(props: {
    src: string;
    alt: string;
    crossOrigin: React.ComponentPropsWithoutRef<'img'>['crossOrigin'];
    onClose: () => void;
}) {
    const { src, alt, crossOrigin, onClose } = props;

    const buttonRef = React.useRef<HTMLButtonElement>(null);

    React.useEffect(() => {
        const handleKeyDown = (event: KeyboardEvent) => {
            if (event.key === 'Escape') {
                onClose();
            }
        };

        document.addEventListener('keydown', handleKeyDown);

        return () => {
            document.removeEventListener('keydown', handleKeyDown);
        };
    }, [onClose]);

    React.useEffect(() => {
        buttonRef.current?.focus();
    }, []);

    return (
        <div
            data-testid="zoom-image-modal"
            className={classNames(
                styles.zoomModal,
                tcls(
                    'fixed',
                    'inset-0',
                    'z-50',
                    'flex',
                    'items-center',
                    'justify-center',
                    'bg-tint-base/4',
                    'backdrop-blur-2xl',
                    'p-8'
                )
            )}
            onClick={onClose}
        >
            <img
                src={src}
                alt={alt}
                crossOrigin={crossOrigin}
                className={tcls('max-w-full', 'max-h-full', 'object-contain', 'bg-tint-base')}
            />

            <button
                ref={buttonRef}
                className={tcls(
                    'absolute',