Countdown Timer

1"use client"
2 
3import { cn } from "@/lib/utils"
4import NumberFlow from '@number-flow/react'
5import { useEffect, useState } from "react"
6 
7type CountdownTimerProps = {
8  date: Date,
9  className?: string,
10} & React.ComponentProps<"div">
11 
12const SECOND = 1000
13const MINUTE = SECOND * 60
14const HOUR = MINUTE * 60
15const DAY = HOUR * 24
16 
17export const getTimeDiff = (target: Date, now: Date) => {
18  let diff = Math.max(0, target.getTime() - now.getTime())
19 
20  const days = Math.trunc(diff / DAY)
21  diff %= DAY
22 
23  const hours = Math.trunc(diff / HOUR)
24  diff %= HOUR
25 
26  const minutes = Math.trunc(diff / MINUTE)
27  diff %= MINUTE
28 
29  const seconds = Math.trunc(diff / SECOND)
30 
31  return { days, hours, minutes, seconds }
32}
33 
34export default function CountdownTimer({ date, className, ...props }: CountdownTimerProps) {
35  const [now, setNow] = useState<Date | null>(null)
36 
37  useEffect(() => {
38    let timeout: NodeJS.Timeout
39 
40    const tick = () => {
41      setNow(new Date())
42      timeout = setTimeout(tick, 1000)
43    }
44 
45    tick()
46 
47    return () => clearTimeout(timeout)
48  }, [])
49 
50  if (!now) return null
51 
52  const { days, hours, minutes, seconds } = getTimeDiff(date, now)
53 
54  return (
55    <div className={cn("flex justify-around items-center text-center gap-2", className)} {...props}>
56      <div className="flex flex-col gap-1">
57        <NumberFlow className="text-lg font-bold" value={days} />
58        <span className="text-sm text-muted-foreground">Days</span>
59      </div>
60      <div className="flex flex-col gap-1">
61        <NumberFlow className="text-lg font-bold" value={hours} />
62        <span className="text-sm text-muted-foreground">Hours</span>
63      </div>
64      <div className="flex flex-col gap-1">
65        <NumberFlow className="text-lg font-bold" value={minutes} />
66        <span className="text-sm text-muted-foreground">Minutes</span>
67      </div>
68      <div className="flex flex-col gap-1">
69        <NumberFlow className="text-lg font-bold" value={seconds} />
70        <span className="text-sm text-muted-foreground">Seconds</span>
71      </div>
72    </div>
73  )
74}