stacker.news/components/countdown.js

67 lines
1.6 KiB
JavaScript
Raw Normal View History

2021-08-11 20:34:10 +00:00
import Countdown from 'react-countdown'
2024-04-16 22:58:26 +00:00
export default function SimpleCountdown (props) {
2021-08-11 20:34:10 +00:00
return (
2024-04-16 22:58:26 +00:00
<CountdownShared
{...props} formatter={props => {
return (
<>
{props.formatted.minutes}:{props.formatted.seconds}
</>
)
}}
/>
)
}
export function LongCountdown (props) {
return (
<CountdownShared
{...props} formatter={props => {
return (
<>
{props.formatted.days && `${props.formatted.days} days `}
{props.formatted.hours && `${props.formatted.hours} hours `}
{props.formatted.minutes && `${props.formatted.minutes} minutes `}
{props.formatted.seconds && `${props.formatted.seconds} seconds `}
</>
)
}}
/>
)
}
export function CompactLongCountdown (props) {
return (
<CountdownShared
{...props} formatter={props => {
return (
<>
{Number(props.formatted.days) > 0
2024-04-16 22:58:26 +00:00
? ` ${props.formatted.days}d ${props.formatted.hours}h ${props.formatted.minutes}m ${props.formatted.seconds}s`
: ` ${props.formatted.hours}:${props.formatted.minutes}:${props.formatted.seconds}`}
</>
)
}}
/>
2021-08-11 20:34:10 +00:00
)
}
2023-11-21 23:32:22 +00:00
2024-04-16 22:58:26 +00:00
function CountdownShared ({ className, onComplete, date, formatter }) {
2023-11-21 23:32:22 +00:00
return (
<span className={className}>
<Countdown
date={date}
renderer={props => {
return (
<span suppressHydrationWarning>
2024-04-16 22:58:26 +00:00
{formatter(props)}
2023-11-21 23:32:22 +00:00
</span>
)
}}
onComplete={onComplete}
/>
</span>
)
}