SwipeableCard.tsx

/**
  Simplified version of https://examples.motion.dev/react/card-stack
**/

import { motion, useMotionValue, useTransform, animate } from "framer-motion"

function SwipeableCard() {
  const x = useMotionValue(0)
  const rotate = useTransform(x, [-200, 200], [-25, 25])

  const onDragEnd = (event, info) => {
    // If swiped far enough or fast enough, animate it off-screen
    if (Math.abs(info.offset.x) > 100 || Math.abs(info.velocity.x) > 500) {
      const direction = info.offset.x > 0 ? 1 : -1
      animate(x, direction * 500, {
        type: "spring",
        stiffness: 400,
        damping: 40,
      })
      // Here you would trigger logic to show the next card
    } else {
      // Otherwise, animate it back to the center
      animate(x, 0, { type: "spring", stiffness: 600, damping: 30 })
    }
  }

  return (
    <motion.div
      drag="x"
      style={{ x, rotate }}
      onDragEnd={onDragEnd}
      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
      // Add your card styling here
    />
  )
}