|
| 1 | +"use client" |
| 2 | + |
| 3 | +import { useEffect, useState } from "react" |
| 4 | +import humanizeDuration from "humanize-duration" |
| 5 | +import { useLocale, useTranslations } from "next-intl" |
| 6 | + |
| 7 | +const fusakaDate = new Date("2025-12-03T21:49:11.000Z") |
| 8 | +const fusakaDateTime = fusakaDate.getTime() |
| 9 | +const SECONDS = 1000 |
| 10 | + |
| 11 | +type TimeUnits = { |
| 12 | + days: number |
| 13 | + hours: number |
| 14 | + minutes: number |
| 15 | + seconds: number | null |
| 16 | + isExpired: boolean |
| 17 | +} |
| 18 | + |
| 19 | +type TimeLabels = { |
| 20 | + days: string |
| 21 | + hours: string |
| 22 | + minutes: string |
| 23 | + seconds: string |
| 24 | +} |
| 25 | + |
| 26 | +const getTimeUnits = (): TimeUnits => { |
| 27 | + const now = Date.now() |
| 28 | + const timeLeft = fusakaDateTime - now |
| 29 | + |
| 30 | + if (timeLeft < 0) { |
| 31 | + return { |
| 32 | + days: 0, |
| 33 | + hours: 0, |
| 34 | + minutes: 0, |
| 35 | + seconds: null, |
| 36 | + isExpired: true, |
| 37 | + } |
| 38 | + } |
| 39 | + |
| 40 | + const days = Math.floor(timeLeft / (24 * 60 * 60 * 1000)) |
| 41 | + const hours = Math.floor( |
| 42 | + (timeLeft % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000) |
| 43 | + ) |
| 44 | + const minutes = Math.floor((timeLeft % (60 * 60 * 1000)) / (60 * 1000)) |
| 45 | + const seconds = |
| 46 | + days === 0 ? Math.floor((timeLeft % (60 * 1000)) / 1000) : null |
| 47 | + |
| 48 | + return { |
| 49 | + days, |
| 50 | + hours, |
| 51 | + minutes, |
| 52 | + seconds, |
| 53 | + isExpired: false, |
| 54 | + } |
| 55 | +} |
| 56 | + |
| 57 | +const getTimeLabels = (locale: string): TimeLabels => { |
| 58 | + const baseOptions = { |
| 59 | + round: true, |
| 60 | + language: locale, |
| 61 | + } |
| 62 | + |
| 63 | + try { |
| 64 | + // Use humanizeDuration to get translated unit names (plural forms) |
| 65 | + // Format 2 units of each type to get plural forms |
| 66 | + const twoDays = humanizeDuration(2 * 24 * 60 * 60 * 1000, { |
| 67 | + ...baseOptions, |
| 68 | + units: ["d"], |
| 69 | + }) |
| 70 | + const twoHours = humanizeDuration(2 * 60 * 60 * 1000, { |
| 71 | + ...baseOptions, |
| 72 | + units: ["h"], |
| 73 | + }) |
| 74 | + const twoMinutes = humanizeDuration(2 * 60 * 1000, { |
| 75 | + ...baseOptions, |
| 76 | + units: ["m"], |
| 77 | + }) |
| 78 | + const twoSeconds = humanizeDuration(2 * 1000, { |
| 79 | + ...baseOptions, |
| 80 | + units: ["s"], |
| 81 | + }) |
| 82 | + |
| 83 | + // Extract unit names (remove the number) |
| 84 | + const extractUnit = (str: string): string => { |
| 85 | + // Remove leading numbers, whitespace, and any separators |
| 86 | + // Handles formats like "1 day", "1d", "1 jour", etc. |
| 87 | + return str |
| 88 | + .replace(/^\d+\s*/, "") // Remove leading number and space |
| 89 | + .replace(/^\d+/, "") // Remove any remaining leading number (for formats like "1d") |
| 90 | + .trim() |
| 91 | + .split(/\s+/)[0] // Take first word in case of multiple words |
| 92 | + } |
| 93 | + |
| 94 | + return { |
| 95 | + days: extractUnit(twoDays), |
| 96 | + hours: extractUnit(twoHours), |
| 97 | + minutes: extractUnit(twoMinutes), |
| 98 | + seconds: extractUnit(twoSeconds), |
| 99 | + } |
| 100 | + } catch { |
| 101 | + // Fallback to English if translation fails |
| 102 | + return { |
| 103 | + days: "days", |
| 104 | + hours: "hours", |
| 105 | + minutes: "minutes", |
| 106 | + seconds: "seconds", |
| 107 | + } |
| 108 | + } |
| 109 | +} |
| 110 | + |
| 111 | +const FusakaCountdown = () => { |
| 112 | + const locale = useLocale() |
| 113 | + const t = useTranslations("page-index") |
| 114 | + const [timeUnits, setTimeUnits] = useState<TimeUnits>(() => getTimeUnits()) |
| 115 | + const [labels, setLabels] = useState<TimeLabels>(() => getTimeLabels(locale)) |
| 116 | + |
| 117 | + useEffect(() => { |
| 118 | + setLabels(getTimeLabels(locale)) |
| 119 | + }, [locale]) |
| 120 | + |
| 121 | + useEffect(() => { |
| 122 | + const updateCountdown = () => { |
| 123 | + setTimeUnits(getTimeUnits()) |
| 124 | + } |
| 125 | + |
| 126 | + const interval = setInterval(updateCountdown, SECONDS) |
| 127 | + |
| 128 | + return () => clearInterval(interval) |
| 129 | + }, []) |
| 130 | + |
| 131 | + if (timeUnits.isExpired) { |
| 132 | + return ( |
| 133 | + <p className="text-2xl font-extrabold text-white"> |
| 134 | + {t("page-index-fusaka-live-now")} |
| 135 | + </p> |
| 136 | + ) |
| 137 | + } |
| 138 | + |
| 139 | + return ( |
| 140 | + <div className="flex items-center justify-center gap-4"> |
| 141 | + {timeUnits.days > 0 && ( |
| 142 | + <div className="flex flex-col items-center"> |
| 143 | + <p className="text-xl font-extrabold text-white md:text-3xl"> |
| 144 | + {String(timeUnits.days).padStart(2, "0")} |
| 145 | + </p> |
| 146 | + <p className="text-xs font-bold uppercase text-white"> |
| 147 | + {labels.days} |
| 148 | + </p> |
| 149 | + </div> |
| 150 | + )} |
| 151 | + <div className="flex flex-col items-center"> |
| 152 | + <p className="text-xl font-extrabold text-white md:text-3xl"> |
| 153 | + {String(timeUnits.hours).padStart(2, "0")} |
| 154 | + </p> |
| 155 | + <p className="text-xs font-bold uppercase text-white">{labels.hours}</p> |
| 156 | + </div> |
| 157 | + <div className="flex flex-col items-center"> |
| 158 | + <p className="text-xl font-extrabold text-white md:text-3xl"> |
| 159 | + {String(timeUnits.minutes).padStart(2, "0")} |
| 160 | + </p> |
| 161 | + <p className="text-xs font-bold uppercase text-white"> |
| 162 | + {labels.minutes} |
| 163 | + </p> |
| 164 | + </div> |
| 165 | + {timeUnits.seconds !== null && ( |
| 166 | + <div className="flex flex-col items-center"> |
| 167 | + <p className="text-xl font-extrabold text-white md:text-3xl"> |
| 168 | + {String(timeUnits.seconds).padStart(2, "0")} |
| 169 | + </p> |
| 170 | + <p className="text-xs font-bold uppercase text-white"> |
| 171 | + {labels.seconds} |
| 172 | + </p> |
| 173 | + </div> |
| 174 | + )} |
| 175 | + </div> |
| 176 | + ) |
| 177 | +} |
| 178 | + |
| 179 | +export default FusakaCountdown |
0 commit comments