Product page

import { bindLightboxGallery } from "@reuse-sh/lightbox";
import "@reuse-sh/lightbox/styles.css";

// The main photo and the thumbnails open as one set.
const photos = document.querySelector(".product-photos");
const lightbox = bindLightboxGallery(photos, { thumbnails: true });

import { useLightbox } from "@reuse-sh/lightbox/react";
import { useRef } from "react";

export function ProductPhotos({ photos }) {
  const lightbox = useLightbox({ thumbnails: true });
  const root = useRef(null);
  const open = (index) => {
    const images = root.current.querySelectorAll("img");
    lightbox.open(photos.map((photo, i) => ({ ...photo, origin: images[i] })), index);
  };
  return (
    <div ref={root} className="product-photos">
      {photos.map((photo, index) => (
        <button key={photo.src} onClick={() => open(index)}>
          <img src={photo.src} alt={photo.alt} />
        </button>
      ))}
    </div>
  );
}