feat: enhance time display with NumberFlow component

app/(main)/header.tsx

@@ -3,12 +3,13 @@
 import { LanguageSwitcher } from "@/components/LanguageSwitcher"
 import { ModeToggle } from "@/components/ThemeSwitcher"
 import { Separator } from "@/components/ui/separator"
-import { Skeleton } from "@/components/ui/skeleton"
+
 import getEnv from "@/lib/env-entry"
+import NumberFlow, { NumberFlowGroup } from "@number-flow/react"
 import { DateTime } from "luxon"
 import { useTranslations } from "next-intl"
 import { useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
+import React from "react"
 
 function Header() {
   const t = useTranslations("Header")
@@ -99,33 +100,51 @@ function Links() {
 
 function Overview() {
   const t = useTranslations("Overview")
-  const [mouted, setMounted] = useState(false)
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-  const timeOption = DateTime.TIME_WITH_SECONDS
-  timeOption.hour12 = true
-  const [timeString, setTimeString] = useState(
-    DateTime.now().setLocale("en-US").toLocaleString(timeOption),
-  )
-  useEffect(() => {
-    const updateTime = () => {
-      const now = DateTime.now().setLocale("en-US").toLocaleString(timeOption)
-      setTimeString(now)
-      requestAnimationFrame(updateTime)
-    }
-    requestAnimationFrame(updateTime)
+  const [time, setTime] = React.useState({
+    hh: DateTime.now().setLocale("en-US").hour,
+    mm: DateTime.now().setLocale("en-US").minute,
+    ss: DateTime.now().setLocale("en-US").second,
+  })
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setTime({
+        hh: DateTime.now().setLocale("en-US").hour,
+        mm: DateTime.now().setLocale("en-US").minute,
+        ss: DateTime.now().setLocale("en-US").second,
+      })
+    }, 1000)
+
+    return () => clearInterval(timer)
   }, [])
+
   return (
     <section className={"mt-10 flex flex-col md:mt-16"}>
       <p className="text-base font-semibold">{t("p_2277-2331_Overview")}</p>
       <div className="flex items-center gap-1.5">
         <p className="text-sm font-medium opacity-50">{t("p_2390-2457_wherethetimeis")}</p>
-        {mouted ? (
-          <p className="text-sm font-medium">{timeString}</p>
-        ) : (
-          <Skeleton className="h-[20px] w-[50px] rounded-[5px] bg-muted-foreground/10 animate-none" />
-        )}
+        <NumberFlowGroup>
+          <div
+            style={{ fontVariantNumeric: "tabular-nums" }}
+            className="flex text-sm font-medium mt-0.5"
+          >
+            <NumberFlow trend={1} value={time.hh} format={{ minimumIntegerDigits: 2 }} />
+            <NumberFlow
+              prefix=":"
+              trend={1}
+              value={time.mm}
+              digits={{ 1: { max: 5 } }}
+              format={{ minimumIntegerDigits: 2 }}
+            />
+            <NumberFlow
+              prefix=":"
+              trend={1}
+              value={time.ss}
+              digits={{ 1: { max: 5 } }}
+              format={{ minimumIntegerDigits: 2 }}
+            />
+          </div>
+        </NumberFlowGroup>
       </div>
     </section>
   )

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@ducanh2912/next-pwa": "^10.2.9",
     "@heroicons/react": "^2.2.0",
+    "@number-flow/react": "^0.5.5",
     "@radix-ui/react-dialog": "^1.1.5",
     "@radix-ui/react-dropdown-menu": "^2.1.5",
     "@radix-ui/react-label": "^2.1.1",