forked from TheWrightServer/ProxmoxVE
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useInView, useMotionValue, useSpring } from "framer-motion";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export default function NumberTicker({
|
|
value,
|
|
direction = "up",
|
|
delay = 0,
|
|
className,
|
|
decimalPlaces = 0,
|
|
}: {
|
|
value: number;
|
|
direction?: "up" | "down";
|
|
className?: string;
|
|
delay?: number; // delay in s
|
|
decimalPlaces?: number;
|
|
}) {
|
|
const ref = useRef<HTMLSpanElement>(null);
|
|
const motionValue = useMotionValue(direction === "down" ? value : 0);
|
|
const springValue = useSpring(motionValue, {
|
|
damping: 60,
|
|
stiffness: 100,
|
|
});
|
|
const isInView = useInView(ref as React.RefObject<Element>, {
|
|
once: true,
|
|
margin: "0px",
|
|
});
|
|
|
|
useEffect(() => {
|
|
isInView &&
|
|
setTimeout(() => {
|
|
motionValue.set(direction === "down" ? 0 : value);
|
|
}, delay * 1000);
|
|
}, [motionValue, isInView, delay, value, direction]);
|
|
|
|
useEffect(
|
|
() =>
|
|
springValue.on("change", (latest) => {
|
|
if (ref.current) {
|
|
ref.current.textContent = Intl.NumberFormat("en-US", {
|
|
minimumFractionDigits: decimalPlaces,
|
|
maximumFractionDigits: decimalPlaces,
|
|
}).format(Number(latest.toFixed(decimalPlaces)));
|
|
}
|
|
}),
|
|
[springValue, decimalPlaces],
|
|
);
|
|
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-block tabular-nums text-black dark:text-white tracking-wider",
|
|
className,
|
|
)}
|
|
ref={ref}
|
|
/>
|
|
);
|
|
}
|