feat: add NumberFlowDuration component for enhanced duration display in DashboardPage

2025-08-12 22:03:40 +02:00
parent fb80806819
commit ccd5973db9
2 changed files with 95 additions and 3 deletions
--- a/src/components/ui/number-flow-duration.tsx
+++ b/src/components/ui/number-flow-duration.tsx
@@ -0,0 +1,87 @@
+import NumberFlow from '@number-flow/react'
+import { formatDuration } from '@/utils/format-duration'
+
+interface NumberFlowDurationProps {
+  duration: number
+  variant?: 'clock' | 'wordy'
+  className?: string
+}
+
+export function NumberFlowDuration({ 
+  duration, 
+  variant = 'clock', 
+  className 
+}: NumberFlowDurationProps) {
+  const formatted = formatDuration(duration)
+  
+  // Split the formatted duration to get individual parts
+  const parts = formatted.split(':')
+  
+  if (variant === 'clock') {
+    // For clock variant
+    if (parts.length === 2) {
+      // Format: MM:SS
+      const [minutes, seconds] = parts
+      return (
+        <span className={className}>
+          <NumberFlow
+            value={parseInt(minutes)}
+            digits={{ 1: { max: 5 } }}
+            format={{ minimumIntegerDigits: 2 }}
+          />
+          <NumberFlow
+            value={parseInt(seconds)}
+            prefix=":"
+            digits={{ 1: { max: 5 } }}
+            format={{ minimumIntegerDigits: 2 }}
+          />
+        </span>
+      )
+    } else {
+      // Format: HH:MM:SS
+      const [hours, minutes, seconds] = parts
+      return (
+        <span className={className}>
+          <NumberFlow
+            value={parseInt(hours)}
+            format={{ minimumIntegerDigits: 2 }}
+          />
+          <NumberFlow
+            value={parseInt(minutes)}
+            prefix=":"
+            digits={{ 1: { max: 5 } }}
+            format={{ minimumIntegerDigits: 2 }}
+          />
+          <NumberFlow
+            value={parseInt(seconds)}
+            prefix=":"
+            digits={{ 1: { max: 5 } }}
+            format={{ minimumIntegerDigits: 2 }}
+          />
+        </span>
+      )
+    }
+  }
+  
+  // For wordy variant
+  if (parts.length === 2) {
+    // Format: MM:SS
+    const [minutes, seconds] = parts
+    return (
+      <span className={className}>
+        <NumberFlow value={parseInt(minutes)} />m{' '}
+        <NumberFlow value={parseInt(seconds)} />s
+      </span>
+    )
+  } else {
+    // Format: HH:MM:SS
+    const [hours, minutes, seconds] = parts
+    return (
+      <span className={className}>
+        <NumberFlow value={parseInt(hours)} />h{' '}
+        <NumberFlow value={parseInt(minutes)} />m{' '}
+        <NumberFlow value={parseInt(seconds)} />s
+      </span>
+    )
+  }
+}