"use client"; import * as React from "react"; import { AnimatePresence, animate, motion, useMotionValue, useTransform } from "motion/react"; import { cn } from "@kineticui/core"; import { HeartIcon, RefreshIcon, XIcon } from "@kineticui/icons"; export type SwipeDirection = "left" | "right"; export type SwipeCardStackProps = { items: T[]; getKey: (item: T) => string; renderCard: (item: T) => React.ReactNode; onSwipe?: (item: T, direction: SwipeDirection) => void; /** Shown when every card has been swiped. */ empty?: React.ReactNode; /** Labels stamped on the card while dragging. */ likeLabel?: string; nopeLabel?: string; /** Show Undo / Nope / Like buttons. */ showControls?: boolean; className?: string; }; function TopCard({ children, onSwipe, likeLabel, nopeLabel, forced }: { children: React.ReactNode; onSwipe: (d: SwipeDirection) => void; likeLabel: string; nopeLabel: string; forced: SwipeDirection | null }) { const x = useMotionValue(0); const rotate = useTransform(x, [-240, 240], [-16, 16]); const like = useTransform(x, [20, 110], [0, 1]); const nope = useTransform(x, [-110, -20], [1, 0]); const fly = React.useCallback( (d: SwipeDirection) => { void animate(x, d === "right" ? 600 : -600, { duration: 0.32, ease: "easeIn" }).then(() => onSwipe(d)); }, [x, onSwipe], ); React.useEffect(() => { if (forced) fly(forced); }, [forced, fly]); return ( { if (info.offset.x > 120 || info.velocity.x > 600) fly("right"); else if (info.offset.x < -120 || info.velocity.x < -600) fly("left"); }} tabIndex={0} onKeyDown={(e) => { if (e.key === "ArrowRight") fly("right"); if (e.key === "ArrowLeft") fly("left"); }} aria-label="Card. Swipe or press left/right arrow." className="absolute inset-0 z-10 cursor-grab touch-none overflow-hidden rounded-3xl shadow-overlay outline-none focus-visible:ring-2 focus-visible:ring-accent active:cursor-grabbing" > {children} {likeLabel} {nopeLabel} ); } /** Tinder-style card stack: drag or tap to like/pass, with undo. */ export function SwipeCardStack({ items, getKey, renderCard, onSwipe, empty, likeLabel = "Like", nopeLabel = "Nope", showControls = true, className }: SwipeCardStackProps) { const [index, setIndex] = React.useState(0); const [forced, setForced] = React.useState(null); const top = items[index]; const next = items.slice(index + 1, index + 3); const handle = React.useCallback( (d: SwipeDirection) => { if (top) onSwipe?.(top, d); setForced(null); setIndex((i) => i + 1); }, [top, onSwipe], ); return (

{next .map((item, i) => ( {renderCard(item)} )) .reverse()} {top ? ( {renderCard(top)} ) : ( {empty ?? "You're all caught up"} )}

{showControls ? (

) : null}

); }

Swipe Card Stack

Installation

Exports