import { Dispatch, SetStateAction } from "react"; import Hotkeys from "react-hot-keys"; import { useSwipeable } from "react-swipeable"; 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; function handlePrevious() { if (index > 0) setIndex(index - 1); } function handleNext() { if (index < images.length - 1) setIndex(index + 1); } const sensibilitySwipe = 0.5; const handlers = useSwipeable({ onSwipedLeft: (SwipeEventData) => { if (SwipeEventData.velocity < sensibilitySwipe) return; handleNext(); }, onSwipedRight: (SwipeEventData) => { if (SwipeEventData.velocity < sensibilitySwipe) return; handlePrevious(); }, }); return ( <> {state && ( { if (keyName === "left") { handlePrevious(); } else { handleNext(); } }} >
{index > 0 && ( )}
{index < images.length - 1 && ( )}
)} ); }