Pricing 1

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