Add animated numbers

apps/dashboard/package.json

@@ -45,6 +45,7 @@
     "geist": "^1.3.1",
     "loops": "1.0.1",
     "lottie-react": "^2.4.0",
+    "motion-number": "^0.1.6",
     "ms": "^2.1.3",
     "next": "14.2.1",
     "next-international": "1.2.4",

apps/dashboard/src/components/animated-number.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useCurrentLocale } from "@/locales/client";
+import MotionNumber from "motion-number";
+
+type Props = {
+  value: number;
+  currency: string;
+};
+
+export function AnimatedNumber({ value, currency }: Props) {
+  const locale = useCurrentLocale();
+
+  console.log(locale);
+
+  return (
+    <MotionNumber
+      value={value}
+      format={{
+        style: "currency",
+        currency: currency,
+      }}
+      locales="en-US" // Intl.NumberFormat() locales
+    />
+  );
+}

apps/dashboard/src/components/charts/burn-rate-chart.tsx

@@ -8,7 +8,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@midday/ui/tooltip";
-import { FormatAmount } from "../format-amount";
+import { AnimatedNumber } from "../animated-number";
 import { AreaChart } from "./area-chart";
 import { burnRateExamleData } from "./data";
 
@@ -44,8 +44,8 @@ export async function BurnRateChart({
     <div className={cn(disabled && "pointer-events-none select-none")}>
       <div className="space-y-2 mb-14">
         <h1 className="text-4xl font-mono">
-          <FormatAmount
-            amount={calculateAvgBurnRate(burnRateData)}
+          <AnimatedNumber
+            value={calculateAvgBurnRate(burnRateData)}
             currency={currency}
           />
         </h1>

apps/dashboard/src/components/charts/profit-revenue-chart.tsx

@@ -1,5 +1,6 @@
 import { getMetrics } from "@midday/supabase/cached-queries";
 import { cn } from "@midday/ui/cn";
+import { AnimatedNumber } from "../animated-number";
 import { FormatAmount } from "../format-amount";
 import { BarChart } from "./bar-chart";
 import { chartExampleData } from "./data";
@@ -27,8 +28,8 @@ export async function ProfitRevenueChart({
     <div className={cn(disabled && "pointer-events-none select-none")}>
       <div className="space-y-2 mb-14 inline-block">
         <h1 className="text-4xl font-mono">
-          <FormatAmount
-            amount={data?.summary?.currentTotal ?? 0}
+          <AnimatedNumber
+            value={data?.summary?.currentTotal ?? 0}
             currency={data?.summary?.currency ?? "USD"}
           />
         </h1>