Lightbox

import Image from 'src/components/image';
import Lightbox, { useLightBox } from 'src/components/lightbox';
 
const IMAGES = [
  {
    src: 'https://unsplash.com/photos/AC3T7tvwPrY',
  },
  {
    src: 'https://unsplash.com/photos/AC3T7tvwPrY',
  },
  {
    src: 'https://unsplash.com/photos/AC3T7tvwPrY',
  },
  {
    src: 'https://unsplash.com/photos/AC3T7tvwPrY',
  },
];
 
function App() {
  const { selected, open, onOpen, onClose } = useLightBox(slides);
 
  return (
    <>
      {IMAGES.map((slide) => (
        <Image alt={slide.src} src={slide.src} onClick={() => onOpen(slide.src)} />
      ))}
 
      <Lightbox index={selected} slides={slides} open={open} close={onClose} />
    </>
  );
}