30 lines
792 B
TypeScript
30 lines
792 B
TypeScript
import { secondsToMinutes } from 'date-fns'
|
|
import { Text } from 'theme-ui'
|
|
|
|
interface RemainingTimeBoxProps {
|
|
displayRemainingTime: number
|
|
}
|
|
|
|
const RemainingTimeBox = ({ displayRemainingTime }: RemainingTimeBoxProps) => {
|
|
if (displayRemainingTime < 0) {
|
|
displayRemainingTime = 0
|
|
}
|
|
const durationInSecs = Math.ceil(displayRemainingTime / 1000)
|
|
const minutes = secondsToMinutes(durationInSecs)
|
|
const secs = durationInSecs % 60
|
|
|
|
return (
|
|
<Text sx={{ fontSize: 72, fontFamily: 'monospace', lineHeight: '1em' }}>
|
|
{prependZero(minutes, 2)}:{prependZero(secs, 2)}
|
|
</Text>
|
|
)
|
|
}
|
|
|
|
export default RemainingTimeBox
|
|
|
|
function prependZero(value: number, digits: number) {
|
|
const fillCount = digits - value.toString().length
|
|
|
|
return `${'0'.repeat(fillCount)}${value}`
|
|
}
|