useSwipe

import { useSwipe } from "@servicetitan/anvil2";

function SwipeableCard({ onDismiss }) {
  const { onTouchStart, onTouchMove, onTouchEnd, direction } = useSwipe(
    (dir) => {
      if (dir === "left") {
        onDismiss();
      }
    }
  );

  return (
    <div
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
    >
      Swipe left to dismiss
    </div>
  );
}

function DismissibleCard({ id, onDismiss }) {
  const { onTouchStart, onTouchMove, onTouchEnd } = useSwipe((direction) => {
    if (direction === "left" || direction === "right") {
      onDismiss(id);
    }
  });

  return (
    <Card
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
    >
      <Text>Swipe to dismiss</Text>
    </Card>
  );
}

function ImageCarousel({ images }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  const { onTouchStart, onTouchMove, onTouchEnd } = useSwipe((direction) => {
    if (direction === "left" && currentIndex < images.length - 1) {
      setCurrentIndex((i) => i + 1);
    } else if (direction === "right" && currentIndex > 0) {
      setCurrentIndex((i) => i - 1);
    }
  });

  return (
    <div
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
    >
      <img src={images[currentIndex]} alt={`Slide ${currentIndex + 1}`} />
    </div>
  );
}