Merge pull request #3128 from XRPLF/banner-countdown

@theme/components/Navbar/Navbar.tsx

@@ -6,6 +6,7 @@ import { Link } from "@redocly/theme/components/Link/Link";
 import { ColorModeSwitcher } from "@redocly/theme/components/ColorModeSwitcher/ColorModeSwitcher";
 import { Search } from "@redocly/theme/components/Search/Search";
 import arrowUpRight from "../../../static/img/icons/arrow-up-right-custom.svg";
+import moment from "moment-timezone";
 
 // @ts-ignore
 
@@ -14,12 +15,51 @@ const alertBanner = {
   message: "APEX 2025",
   button: "REGISTER",
   link: "https://www.xrpledgerapex.com/?utm_source=xrplwebsite&utm_medium=direct&utm_campaign=xrpl-event-ho-xrplapex-glb-2025-q1_xrplwebsite_ari_arp_bf_rsvp&utm_content=cta_btn_english_pencilbanner",
-  date: "AGENDA NOW LIVE",
+  targetDate: "2025-06-11 08:00:00", // June 11, 2025 at 8AM Singapore time
 };
-export function AlertBanner({ message, date, button, link, show }) {
+
+function useCountdown(targetDate: string) {
+  const [timeLeft, setTimeLeft] = React.useState("");
+
+  React.useEffect(() => {
+    const calculateTimeLeft = () => {
+      // Create target date in Singapore timezone (Asia/Singapore)
+      const target = moment.tz(targetDate, "YYYY-MM-DD HH:mm:ss", "Asia/Singapore");
+      const now = moment();
+      const diff = target.diff(now);
+
+      if (diff <= 0) {
+        setTimeLeft("EVENT STARTED");
+        return;
+      }
+
+      const duration = moment.duration(diff);
+      const days = Math.floor(duration.asDays());
+      const hours = duration.hours();
+      const minutes = duration.minutes();
+      const seconds = duration.seconds();
+
+      const formattedTime = `${days.toString().padStart(2, '0')}:${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+      setTimeLeft(`IN ${formattedTime}`);
+    };
+
+    // Calculate immediately
+    calculateTimeLeft();
+
+    // Update every second
+    const interval = setInterval(calculateTimeLeft, 1000);
+
+    return () => clearInterval(interval);
+  }, [targetDate]);
+
+  return timeLeft;
+}
+
+export function AlertBanner({ message, button, link, show, targetDate }) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const bannerRef = React.useRef(null);
+  const countdown = useCountdown(targetDate);
 
   React.useEffect(() => {
     const banner = bannerRef.current;
@@ -47,7 +87,7 @@ export function AlertBanner({ message, date, button, link, show }) {
       >
         <div className="banner-event-details">
           <div className="event-info">{translate(message)}</div>
-          <div className="event-date">{translate(date)}</div>
+          <div className="event-date">{countdown}</div>
         </div>
         <div className="banner-button">
           <div className="button-text">{translate(button)}</div>

package-lock.json

@@ -20,6 +20,7 @@
         "five-bells-condition": "^5.0.1",
         "lottie-react": "^2.4.0",
         "moment": "^2.29.4",
+        "moment-timezone": "^0.6.0",
         "node-fetch": "^3.3.2",
         "react": "^18.2.0",
         "react-alert": "^7.0.3",
@@ -5940,6 +5941,18 @@
         "node": "*"
       }
     },
+    "node_modules/moment-timezone": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.6.0.tgz",
+      "integrity": "sha512-ldA5lRNm3iJCWZcBCab4pnNL3HSZYXVb/3TYr75/1WCTWYuTqYUb5f/S384pncYjJ88lbO8Z4uPDvmoluHJc8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "moment": "^2.29.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "five-bells-condition": "^5.0.1",
     "lottie-react": "^2.4.0",
     "moment": "^2.29.4",
+    "moment-timezone": "^0.6.0",
     "node-fetch": "^3.3.2",
     "react": "^18.2.0",
     "react-alert": "^7.0.3",