import { Dispatch, SetStateAction, useCallback } from "react"; import { useHotkeys } from "react-hotkeys-hook"; import Img from "./Img"; import Button from "./Inputs/Button"; import Popup from "./Popup"; interface Props { setState: | Dispatch> | Dispatch>; state: boolean; images: string[]; index: number; setIndex: Dispatch>; } export default function LightBox(props: Props): JSX.Element { const { state, setState, images, index, setIndex } = props; const handlePrevious = useCallback(() => { setIndex((previousIndex) => (previousIndex > 0 ? previousIndex - 1 : 0)); }, [setIndex]); const handleNext = useCallback(() => { setIndex((previousIndex) => previousIndex < images.length - 1 ? previousIndex + 1 : images.length - 1 ); }, [images.length, setIndex]); useHotkeys("left", handlePrevious); useHotkeys("right", handleNext); return ( <> {state && (
{index > 0 && ( )}
{index < images.length - 1 && ( )}
)} ); }