CountdownTimerSpan.tsx29 lines · main

1	import MotionNumber from '@number-flow/react'
2
3	interface CountdownTimerSpanProps {
4	seconds: number
5	}
6
7	const CountdownTimerSpan = ({ seconds }: CountdownTimerSpanProps) => {
8	const hours = Math.floor(seconds / 3600)
9	const minutes = Math.floor((seconds % 3600) / 60)
10	const remainingSeconds = seconds % 60
11
12	const formatConfig = { minimumIntegerDigits: 2 }
13	const formatValue = (value: number) => value.toString().padStart(2, '0')
14
15	return (
16	<span className="inline-flex gap-2">
17	<span className="text-foreground-lighter text-sm p-0">Time remaining: </span>
18	<span className="text-foreground text-sm font-mono flex items-center gap-0">
19	<MotionNumber format={formatConfig} value={Number(formatValue(hours))} />
20	hr
21	<MotionNumber format={formatConfig} value={Number(formatValue(minutes))} />
22	m
23	<MotionNumber format={formatConfig} value={Number(formatValue(remainingSeconds))} />
24	</span>
25	</span>
26	)
27	}
28
29	export default CountdownTimerSpan