Pricing 2

1"use client";
2 
3import { cn } from "@/lib/utils";
4import SmoothButton from "@/components/smoothui/smooth-button";
5import { motion, useReducedMotion } from "motion/react";
6import { useEffect, useRef, useState } from "react";
7 
8const CARD_ANIMATION_DELAY = 0.1;
9 
10interface PriceFlowProps {
11  className?: string;
12  value: number;
13}
14 
15function PriceFlow({ value, className = "" }: PriceFlowProps) {
16  const [prevValue, setPrevValue] = useState(value);
17  const prevTensRef = useRef<HTMLSpanElement>(null);
18  const nextTensRef = useRef<HTMLSpanElement>(null);
19  const prevOnesRef = useRef<HTMLSpanElement>(null);
20  const nextOnesRef = useRef<HTMLSpanElement>(null);
21 
22  useEffect(() => {
23    if (value !== prevValue) {
24      const prevTens = prevTensRef.current;
25      const nextTens = nextTensRef.current;
26      const prevOnes = prevOnesRef.current;
27      const nextOnes = nextOnesRef.current;
28 
29      if (
30        prevTens &&
31        nextTens &&
32        Math.floor(value / 10) !== Math.floor(prevValue / 10)
33      ) {
34        if (Math.floor(value / 10) > Math.floor(prevValue / 10)) {
35          prevTens.classList.add("slide-out-up");
36          nextTens.classList.add("slide-in-up");
37        } else {
38          prevTens.classList.add("slide-out-down");
39          nextTens.classList.add("slide-in-down");
40        }
41 
42        const handleTensAnimationEnd = () => {
43          prevTens.classList.remove("slide-out-up", "slide-out-down");
44          nextTens.classList.remove("slide-in-up", "slide-in-down");
45          prevTens.removeEventListener("animationend", handleTensAnimationEnd);
46        };
47 
48        prevTens.addEventListener("animationend", handleTensAnimationEnd);
49      }
50 
51      if (prevOnes && nextOnes && value % 10 !== prevValue % 10) {
52        setTimeout(() => {
53          if (value % 10 > prevValue % 10) {
54            prevOnes.classList.add("slide-out-up");
55            nextOnes.classList.add("slide-in-up");
56          } else {
57            prevOnes.classList.add("slide-out-down");
58            nextOnes.classList.add("slide-in-down");
59          }
60 
61          const handleOnesAnimationEnd = () => {
62            prevOnes.classList.remove("slide-out-up", "slide-out-down");
63            nextOnes.classList.remove("slide-in-up", "slide-in-down");
64            prevOnes.removeEventListener(
65              "animationend",
66              handleOnesAnimationEnd
67            );
68          };
69 
70          prevOnes.addEventListener("animationend", handleOnesAnimationEnd);
71        }, 50);
72      }
73 
74// … truncated