import React from 'react' ; import dayjs from 'dayjs' ; import { Box , Typography } from '@material-ui/core' ; const Countdown = ( ) => { const diffDay = React . useMemo ( ( ) => Math . max ( - 1 , dayjs ( '2020/1/11' ) . diff ( dayjs ( ) , 'day' ) ) , [ ] ) ; const days = Array . from ( Array ( 50 - diffDay ) . keys ( ) ) ; const dayDOM = days . map ( ( idx ) => { return < span key = { idx } > { 50 - idx } < /span>; } ) ; return ( < Typography variant = "h2" align = "center" className = "color-primary countdown" > < div className = "countdown__content" > < span > 距離 2020 立委投票剩下 < /span> < div className = "countdown__numbers" > 00 < div className = "countdown__numbers-inner" > { dayDOM } < /div> < /div> < span > 天 < /span> < /div> < Box mt = { 2 } > 你準備好了嗎 ？ < /Box> < /Typography>); } ; export default Countdown ;