diff --git a/custom/react/Countdown.tsx b/custom/react/Countdown.tsx new file mode 100644 index 0000000..2319e29 --- /dev/null +++ b/custom/react/Countdown.tsx @@ -0,0 +1,3 @@ +import Countdown from "./components/Countdown/indext"; + +export default Countdown; diff --git a/custom/react/components/Countdown/indext.tsx b/custom/react/components/Countdown/indext.tsx new file mode 100644 index 0000000..1da959f --- /dev/null +++ b/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({ + 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
{`${hourString}:${minuteString}:${secondString}`}
; +}; + +export default Countdown; diff --git a/custom/store/interfaces.json b/custom/store/interfaces.json index 2c26755..f4c3d28 100644 --- a/custom/store/interfaces.json +++ b/custom/store/interfaces.json @@ -26,5 +26,8 @@ }, "main-academy": { "component": "Main" + }, + "countdown-academy": { + "component": "Countdown" } } diff --git a/storefront/store/blocks/pages/home/home.jsonc b/storefront/store/blocks/pages/home/home.jsonc index 94c00cd..467d2d2 100644 --- a/storefront/store/blocks/pages/home/home.jsonc +++ b/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"