Lightbox

import { Lightbox } from "@lualtek/react-components";
 
const IMAGES = [
  {
    image: "https://...",
    title: "My image",
  },
  {
    image: "https://...",
    title: "My image 2",
  },
];
 
export default () => {
  const activeImageState = useState(0);
  const [, setActiveImageState] = activeImageState;
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <>
      {IMAGES.map((item, index) => (
        <button
          key={item.image}
          onClick={() => {
            setActiveImageState(index);
            setIsOpen(true);
          }}
        >
          <img
            style={{ width: 150, height: 150 }}
            src={item.image}
            alt={item.title}
          />
        </button>
      ))}
      <Lightbox
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        data={IMAGES}
        selectedState={activeImageState}
      />
    </>
  );
};

export type LightboxProps = {
  /**
   * Array of objects containing the image url and optional title
   */
  data: Array<{
    image: string;
    title?: string;
  }>;
 
  /**
   * State for the active index of the lightbox
   */
  selectedState: [number, React.Dispatch<SetStateAction<number>>];
 
  /**
   * Width of the zoomed image
   * @default '50vw'
   */
  imageWidth?: string;
 
  /**
   *  Height of the zoomed image
   * @default '80vh'
   */
  imageHeight?: string;
 
  /**
   * Width of the thumbnail element inside the navigation
   * @default '50px'
   */
  thumbnailWidth?: string;
 
  /**
   * Height of the thumbnail element inside the navigation
   * @default '50px'
   */
  thumbnailHeight?: string;
 
  /**
   * Set the visibility of the lightbox
   */
  isOpen?: boolean;
 
  /**
   * The callback function that is called when the overlay is closed.
   */
  onClose: () => void;
};