feat(home): adicionando countdown

custom/react/Countdown.tsx

@@ -0,0 +1,3 @@
+import Countdown from "./components/Countdown/indext";
+
+export default Countdown;

custom/react/components/Countdown/indext.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from "react";
+
+interface CountdownProps {
+    //formato: dd/mm/yyyy//hh:mm
+    endDate: string;
+}
+
+interface ITime {
+    hour: number;
+    minute: number;
+    second: number;
+}
+
+const Countdown = ({ endDate }: CountdownProps) => {
+    const [time, setTime] = useState<ITime>({
+        hour: 0,
+        minute: 0,
+        second: 0,
+    });
+
+    const [day, month, year, hourMinute] = endDate.split("/");
+    const [hour, minute] = hourMinute.split(":");
+
+    const updateTime = () => {
+        const finalDate = new Date(
+            parseInt(year),
+            parseInt(month) - 1,
+            parseInt(day),
+            parseInt(hour),
+            parseInt(minute)
+        ).getTime();
+
+        const atualDate = new Date().getTime();
+
+        // eslint-disable-next-line prefer-const
+        let difference = finalDate - atualDate;
+
+        const hours = Math.floor(difference / (1000 * 60 * 60));
+
+        difference = difference - hours * 60 * 60 * 1000;
+
+        const minutes = Math.floor(difference / (1000 * 60));
+
+        difference = difference - minutes * 60 * 1000;
+
+        const seconds = Math.floor(difference / 1000);
+
+        if (hours <= 0) {
+            setTime({
+                hour: 0,
+                minute: 0,
+                second: 0,
+            });
+        } else {
+            setTime({
+                hour: hours,
+                minute: minutes,
+                second: seconds,
+            });
+        }
+    };
+
+    useEffect(() => {
+        setInterval(updateTime, 1000);
+    }, []);
+
+    const hourString = time.hour.toString().padStart(2, "0");
+    const minuteString = time.minute.toString().padStart(2, "0");
+    const secondString = time.second.toString().padStart(2, "0");
+
+    return <div>{`${hourString}:${minuteString}:${secondString}`}</div>;
+};
+
+export default Countdown;

custom/store/interfaces.json

@@ -26,5 +26,8 @@
     },
     "main-academy": {
         "component": "Main"
+    },
+    "countdown-academy": {
+        "component": "Countdown"
     }
 }

storefront/store/blocks/pages/home/home.jsonc

@@ -6,6 +6,7 @@
             "__fold__",
             "flex-layout.row#faixa-de-imagens",
             "main-academy",
+            "countdown-academy",
             "rich-text#m3-shelf-title",
             "flex-layout.row#m3-shelf",
             "info-card#m3-middle-card",
@@ -18,6 +19,12 @@
         // }
     },
 
+    "countdown-academy": {
+        "props": {
+            "endDate": "21/01/2023/00:00"
+        }
+    },
+
     "flex-layout.row#faixa-de-imagens": {
         "props": {
             "blockClass": "faixa-de-imagens"