Chat thread

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

// Each message is its own gallery, so paging stays inside it.
// Photos behind the "+3" tile stay in the markup, hidden.
for (const message of document.querySelectorAll(".message-photos")) {
  bindLightboxGallery(message, { thumbnails: false });
}

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

export function MessagePhotos({ photos }) {
  const lightbox = useLightbox();
  const root = useRef(null);
  const shown = photos.slice(0, 3);
  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="message-photos">
      {shown.map((photo, index) => (
        <button key={photo.src} onClick={() => open(index)}>
          <img src={photo.src} alt={photo.alt} />
          {index === 2 && photos.length > 3 && <span>+{photos.length - 3}</span>}
        </button>
      ))}
    </div>
  );
}