deck

1"use client";
2 
3import { useControllableState } from "@radix-ui/react-use-controllable-state";
4import {
5  motion,
6  type PanInfo,
7  useMotionValue,
8  useTransform,
9} from "motion/react";
10import {
11  Children,
12  cloneElement,
13  type HTMLAttributes,
14  type ReactElement,
15  useCallback,
16  useEffect,
17  useRef,
18  useState,
19} from "react";
20import { cn } from "@/lib/utils";
21 
22export type DeckProps = HTMLAttributes<HTMLDivElement>;
23 
24export const Deck = ({ className, ...props }: DeckProps) => (
25  <div className={cn("relative isolate", className)} {...props} />
26);
27 
28export type DeckCardsProps = HTMLAttributes<HTMLDivElement> & {
29  onSwipe?: (index: number, direction: "left" | "right") => void;
30  onSwipeEnd?: (index: number, direction: "left" | "right") => void;
31  threshold?: number;
32  stackSize?: number;
33  perspective?: number;
34  scale?: number;
35  currentIndex?: number;
36  defaultCurrentIndex?: number;
37  onCurrentIndexChange?: (index: number) => void;
38  animateOnIndexChange?: boolean;
39  indexChangeDirection?: "left" | "right";
40};
41 
42export const DeckCards = ({
43  children,
44  className,
45  onSwipe,
46  onSwipeEnd,
47  threshold = 150,
48  stackSize = 3,
49  perspective = 1000,
50  scale = 0.05,
51  currentIndex: currentIndexProp,
52  defaultCurrentIndex = 0,
53  onCurrentIndexChange,
54  animateOnIndexChange = true,
55  indexChangeDirection = "left",
56  ...props
57}: DeckCardsProps) => {
58  const childrenArray = Children.toArray(children) as ReactElement[];
59  const [currentIndex, setCurrentIndex] = useControllableState({
60    prop: currentIndexProp,
61    defaultProp: defaultCurrentIndex,
62    onChange: onCurrentIndexChange,
63  });
64  const [exitDirection, setExitDirection] = useState<"left" | "right" | null>(
65    null
66  );
67  const [displayIndex, setDisplayIndex] = useState(currentIndex);
68  const isInternalChangeRef = useRef(false);
69  const prevIndexRef = useRef(currentIndex);
70 
71  // Detect external currentIndex changes and trigger animation
72  useEffect(() => {
73    const prevIndex = prevIndexRef.current;
74 
75    // Skip initial mount and internal changes
76    if (prevIndex === currentIndex || isInternalChangeRef.current) {
77      isInternalChangeRef.current = false;
78      prevIndexRef.current = currentIndex;
79      setDisplayIndex(currentIndex);
80      return;
81    }
82 
83    // Only animate if the option is enabled and we have cards to show
84    if (animateOnIndexChange && prevIndex < childrenArray.length) {
85      setExitDirection(indexChangeDirection);
86 
87      // Update display index after animation completes
88// … truncated