42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
/**
|
|
* This file is part of the SplendidBear Websites' projects.
|
|
*
|
|
* Copyright (c) 2026 @ www.splendidbear.org
|
|
*
|
|
* For the full copyright and license information, please view the LICENSE
|
|
* file that was distributed with this source code.
|
|
*/
|
|
import { Fragment, useEffect, useState } from 'react';
|
|
|
|
const ChallengeCountdown = ({ onAccept, onDecline, seconds = 30 }) => {
|
|
const [countdown, setCountdown] = useState(seconds);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCountdown(prev => {
|
|
if (1 >= prev) {
|
|
clearInterval(interval);
|
|
onDecline();
|
|
return 0;
|
|
}
|
|
return prev - 1;
|
|
});
|
|
}, 1000);
|
|
return () => clearInterval(interval);
|
|
}, [onDecline]);
|
|
|
|
return (
|
|
<Fragment>
|
|
<p style={{ textAlign: 'center', marginBottom: 20, color: '#95cff5' }}>
|
|
You have {countdown} second{1 === countdown ? '' : 's'} to answer to the challenge!
|
|
</p>
|
|
<div className="resign">
|
|
<a onClick={onAccept}>Accept</a>
|
|
<a onClick={onDecline}>Decline</a>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export default ChallengeCountdown;
|