Function ImagePreview

apps/web/ui/ImagePreview/index.tsx:16–133

({ current, images, onClick }: Props)

}

export default function ImagePreview({ current, images, onClick }: Props) {
  const [index, setIndex] = useState(images.indexOf(current));
  useEffect(() => {
    if (document.body) {
      document.body.classList.add(styles.overflow);
    }
  }, []);

  function moveLeft() {
    setIndex((index) => {
      if (index === 0) {
        return images.length - 1;
      }
      return index - 1;
    });
  }

  function moveRight() {
    setIndex((index) => {
      if (index === images.length - 1) {
        return 0;
      }
      return index + 1;
    });
  }

  useKeyboard(
    {
      onKeyUp(event: KeyboardEvent) {
        switch (event.key) {
          case 'ArrowLeft':
            return moveLeft();
          case 'ArrowRight':
            return moveRight();
        }
      },
    },
    [images]
  );

  const image = images[index];

  return (
    <Portal id="preview-portal">
      <Preview
        onClick={(event) => {
          event.preventDefault();
          event.stopPropagation();
          onClick();
          if (document.body) {
            document.body.classList.remove(styles.overflow);
          }
        }}
      >
        <img className={styles.preview} src={image} />
        {images.length > 1 && (
          <nav
            className={styles.options}