import Countdown from 'react-countdown' export default function SimpleCountdown (props) { return ( <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 ? ` ${props.formatted.days}d ${props.formatted.hours}h ${props.formatted.minutes}m ${props.formatted.seconds}s` : Number(props.formatted.hours) > 0 ? ` ${props.formatted.hours}:${props.formatted.minutes}:${props.formatted.seconds}` : Number(props.formatted.minutes) > 0 ? ` ${props.formatted.minutes}:${props.formatted.seconds}` : Number(props.formatted.seconds) > 0 ? ` ${props.formatted.seconds}s` : ' '} </> ) }} /> ) } function CountdownShared ({ className, onComplete, date, formatter }) { return ( <span className={className}> <Countdown date={date} renderer={props => { return ( <span suppressHydrationWarning> {formatter(props)} </span> ) }} onComplete={onComplete} /> </span> ) }