33 lines
1006 B
TypeScript
33 lines
1006 B
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Typography } from '@mui/material';
|
|
|
|
interface CountdownTimerProps {
|
|
totalSeconds: number;
|
|
}
|
|
|
|
const CountdownTimer: React.FC<CountdownTimerProps> = ({ totalSeconds }) => {
|
|
const [timeLeft, setTimeLeft] = useState(totalSeconds);
|
|
|
|
useEffect(() => {
|
|
const timerId = setInterval(() => {
|
|
setTimeLeft(prev => Math.max(prev - 1, 0));
|
|
}, 1000);
|
|
|
|
return () => clearInterval(timerId);
|
|
}, []);
|
|
|
|
const formatTime = (seconds: number) => {
|
|
const hrs = Math.floor(seconds / 3600);
|
|
const min = Math.floor((seconds % 3600) / 60);
|
|
const sec = seconds % 60;
|
|
return `${hrs}h ${min}m ${sec}s`;
|
|
};
|
|
|
|
return (
|
|
<Typography variant="body2" style={{ color: timeLeft < 300 ? 'red' : 'white' }} > {/* Warn with red color if less than 5 minutes */}
|
|
{`Time until refill: ${formatTime(timeLeft)}`}
|
|
</Typography>
|
|
);
|
|
};
|
|
|
|
export default CountdownTimer; |