feat: aulas 7.5 e 7.6 treinando

custom/react/Countdown.tsx

@@ -0,0 +1,3 @@
+/* eslint-disable linebreak-style */
+import Countdown from "./components/Countdown";
+export default Countdown;

custom/react/components/Countdown/index.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+
+interface CountdownProps {
+    // Fortmato: dd/mm/aaaa/hr:min
+    endDate:string
+}
+interface time {
+    hour: number,
+    minute: number,
+    second : number
+}
+const Countdown = ({endDate}:CountdownProps) => {
+
+    const [time, setTime] = useState <time> ({
+        hour:0,
+        minute:0,
+        second:0
+    });
+    
+
+    const [day, month, year, hourMinute] = endDate.split("/");
+    const [hour, minute] = hourMinute.split(":");
+
+    const updateTimer = () =>{
+        const finalDate = new Date(
+            parseInt(year),
+            parseInt(month) - 1,
+            parseInt(day),
+            parseInt(hour),
+            parseInt(minute)
+        ).getTime();
+
+        const atualDate = new Date().getTime();
+
+        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(updateTimer,1000);
+    },[]);
+
+
+    return (
+        <div>
+            {`
+            ${time.hour.toString().padStart(2, "0")}:
+            ${time.minute.toString().padStart(2, "0")}:
+            ${time.second.toString().padStart(2, "0")}
+            `}
+        </div>
+    );
+};
+
+export default Countdown;

custom/store/interfaces.json

@@ -23,5 +23,8 @@
         "content": {
             "$ref": "app:agenciamagma.m3-custom#/definitions/DynamicMenu"
         }
+    },
+    "Countdown-academy":{
+        "component": "Countdown"
     }
 }

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

@@ -5,6 +5,7 @@
             "flex-layout.row#deals",
             "__fold__",
             "flex-layout.row#faixa-de-imagens",
+            "Countdown-academy",
             "rich-text#m3-shelf-title",
             "flex-layout.row#m3-shelf",
             "info-card#m3-middle-card",
@@ -17,6 +18,12 @@
         // }
     },
 
+    "Countdown-academy":{
+        "props":{
+            "endDate": "20/01/2023/16:00"
+        }
+    },
+
     "flex-layout.row#faixa-de-imagens":{
         "props":{
             "blockClass":"faixa-de-imagens"

storefront/styles/sass/pages/home/vtex.store-link.scss

@@ -5,4 +5,5 @@
     padding: 15px;
     border-radius: 25%;
     background-color: white;
+    margin-top: 5px;
 }