34 lines
1.1 KiB
JavaScript
34 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
|
|
export function Timer({timerEnd}) {
|
|
const [timeLeft, setTimeLeft] = React.useState(null);
|
|
|
|
React.useEffect(() => {
|
|
if (timerEnd) {
|
|
const intervalId = setInterval(() => {
|
|
const now = new Date();
|
|
const timeLeft = timerEnd - now;
|
|
setTimeLeft(timeLeft > 0 ? timeLeft : 0);
|
|
}, 1000);
|
|
return () => clearInterval(intervalId);
|
|
}
|
|
}, [timerEnd]);
|
|
|
|
const formatTimeLeft = timeLeft => {
|
|
if (timeLeft === null) return '';
|
|
const hours = Math.floor(timeLeft / (1000 * 60 * 60));
|
|
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
|
|
const formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
|
|
|
|
let formattedTimeLeft = '';
|
|
if (hours > 0) {
|
|
formattedTimeLeft += hours + 'h ';
|
|
}
|
|
formattedTimeLeft += minutes + ':' + formattedSeconds;
|
|
return formattedTimeLeft;
|
|
};
|
|
|
|
return <span>{formatTimeLeft(timeLeft)}</span>;
|
|
}
|