refactor: replace react-countup with @number-flow/react

components/view-counter.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import NumberFlow from "@number-flow/react";
 import { useEffect, useState } from "react";
 
-import { CountUp } from "@/components/count-up";
 import { incrementViews } from "@/lib/server/views";
 
 const ViewCounter = ({ slug }: { slug: string }) => {
@@ -25,16 +25,12 @@ const ViewCounter = ({ slug }: { slug: string }) => {
     return <span title="Error getting views! :(">?</span>;
   }
 
-  if (views === null) {
-    return <span className="motion-safe:animate-pulse">0</span>;
-  }
-
   return (
-    <span
-      title={`${Intl.NumberFormat(process.env.NEXT_PUBLIC_SITE_LOCALE).format(views)} ${views === 1 ? "view" : "views"}`}
-    >
-      <CountUp start={0} end={views} delay={0} duration={1.5} />
-    </span>
+    <NumberFlow
+      className={views === null ? "motion-safe:animate-pulse" : undefined}
+      locales={process.env.NEXT_PUBLIC_SITE_LOCALE}
+      value={views ?? 0}
+    />
   );
 };