87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
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>
|
|
)
|
|
}
|
|
} |