Swipe to dismiss

import { useRef } from 'react';
import { animate, motion, useMotionValue, useTransform } from 'motion/react';

const DISTANCE_THRESHOLD = 0.4; // share of the card's width
const VELOCITY_THRESHOLD = 500; // px per second, so a quick flick counts

type NotificationCardProps = {
  title: string;
  body: string;
  onDismiss: () => void;
};

// Render inside a list: `layout` slides the cards below up when one leaves.
export function NotificationCard({
  title,
  body,
  onDismiss
}: NotificationCardProps) {
  const ref = useRef<HTMLLIElement>(null);
  const x = useMotionValue(0);
  const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0]);

  async function flyOut(direction: number) {
    const width = ref.current!.offsetWidth;
    await animate(x, direction * width, { duration: 0.25, ease: 'easeIn' });
    onDismiss();
  }

  return (
    <motion.li
      ref={ref}
      layout
      drag='x' // horizontal only, so vertical scrolling still works
      dragSnapToOrigin // a short swipe springs back into place
      style={{ x, opacity }}
      onDragEnd={(_, { offset, velocity }) => {
        const width = ref.current!.offsetWidth;
        const far = Math.abs(offset.x) > width * DISTANCE_THRESHOLD;
        const fast = Math.abs(velocity.x) > VELOCITY_THRESHOLD;
        if (far || fast) flyOut(Math.sign(fast ? velocity.x : offset.x));
      }}
      className='flex items-start gap-3 rounded-xl border bg-background p-3 shadow-sm'
    >
      <div className='flex-1'>
        <p className='text-sm font-medium'>{title}</p>
        <p className='text-sm text-muted-foreground'>{body}</p>
      </div>
      {/* Swiping is invisible, so mouse and keyboard users get a button. */}
      <button
        type='button'
        onClick={() => flyOut(1)}
        aria-label='Dismiss notification'
        className='rounded-md px-1.5 text-muted-foreground hover:bg-muted'
      >
        ✕
      </button>
    </motion.li>
  );
}