2021-08-11 20:34:10 +00:00
|
|
|
import Countdown from 'react-countdown'
|
|
|
|
|
|
|
|
export default function SimpleCountdown ({ className, onComplete, date }) {
|
|
|
|
return (
|
2021-09-23 20:09:07 +00:00
|
|
|
<span className={className}>
|
2021-08-11 20:34:10 +00:00
|
|
|
<Countdown
|
|
|
|
date={date}
|
2023-07-23 15:08:43 +00:00
|
|
|
renderer={props => <span className='text-monospace' suppressHydrationWarning> {props.formatted.minutes}:{props.formatted.seconds}</span>}
|
2021-08-11 20:34:10 +00:00
|
|
|
onComplete={onComplete}
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
)
|
|
|
|
}
|
2023-11-21 23:32:22 +00:00
|
|
|
|
|
|
|
export function LongCountdown ({ className, onComplete, date }) {
|
|
|
|
return (
|
|
|
|
<span className={className}>
|
|
|
|
<Countdown
|
|
|
|
date={date}
|
|
|
|
renderer={props => {
|
|
|
|
return (
|
|
|
|
<span suppressHydrationWarning>
|
|
|
|
{props.formatted.days && `${props.formatted.days} days `}
|
|
|
|
{props.formatted.minutes && `${props.formatted.minutes} minutes `}
|
|
|
|
{props.formatted.seconds && `${props.formatted.seconds} seconds `}
|
|
|
|
</span>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
onComplete={onComplete}
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
)
|
|
|
|
}
|