Add Zoom Functionality for Blog Images

[charlottewiltshire0]

Implement a feature in the blog to allow users to zoom in on images when clicked. The functionality should be smooth and user-friendly, supporting pinch-to-zoom gestures on mobile devices.

Acceptance Criteria:

1. Users should be able to click on images in the blog to view them in a larger, zoomable overlay.
2. The zoom feature should support pinch-to-zoom on mobile devices.
3. The image overlay should have a close button or an option to exit the zoom view.
4. The design and functionality should be fully responsive and adapt to various screen sizes, including mobile phones and tablets.

Additional Notes:

Ensure the feature is lightweight and does not impact page performance.
The overlay and zoom functionality should match the website's design language.
Test thoroughly on both desktop and mobile devices.
Document any new dependencies or libraries used for this feature.

[opdev1004]

I have written some code. But I just cannot run bun to test/update code with my old hardware.

So I will leave my code here and anyone can go for it instead of me.

My version uses react-zoom-pan-pinch. I just can't work on it further as my hardware cannot run bun's dev environment.

"use client";

import {useState} from "react";
import {TransformWrapper, TransformComponent} from "react-zoom-pan-pinch";
import {X} from "lucide-react";

export default function ZoomImage ({src, alt}: {src: string; alt: string})
{
    const [isOpen, setIsOpen] = useState(false);

    return (
        <>
            <img
                src={src}
                alt={alt}
                className="cursor-zoom-in transition-transform duration-200 hover:scale-105"
                onClick={() => setIsOpen(true)}
            />

            {isOpen && (
                <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50">
                    <div className="absolute top-4 right-4">
                        <button onClick={() => setIsOpen(false)} className="text-white">
                            <X size={30} />
                        </button>
                    </div>
                    <TransformWrapper>
                        <TransformComponent>
                            <img src={src} alt={alt} className="max-w-full max-h-screen" />
                        </TransformComponent>
                    </TransformWrapper>
                </div>
            )}
        </>
    );
}