m3-academy-template-vtexio-.../custom/react/components/Countdown/index.tsx

98 lines
2.4 KiB
TypeScript
Raw Normal View History

2023-01-25 11:07:44 +00:00
import React, { useEffect, useState } from "react";
import styles from "./styles.css";
import clock from "./assets/clock.svg";
interface CountdownProps {
//formato: dd/mm/yyyy/hh:mm
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
2023-01-25 11:11:17 +00:00
});
2023-01-25 11:07:44 +00:00
}else {
setTime({
hour: hours,
minute: minutes,
second: seconds
2023-01-25 11:11:17 +00:00
});
2023-01-25 11:07:44 +00:00
}
};
useEffect(() => {
setInterval(updateTimer, 1000);
2023-01-25 11:11:17 +00:00
}, []);
2023-01-25 11:07:44 +00:00
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 className={styles.countdownWrapper}>
<div className={styles.countdownBadge}>
<img className={styles.countdownBadgeClock} src={clock} />
</div>
<div className={styles.countdownTitle}>
<h1 className={styles.countdownHeading1}>Ofertas</h1>
<h3 className={styles.countdownHeading3}>Não perca tempo,</h3>
<h2 className={styles.countdownHeading2}>garanta agora!</h2>
</div>
<div className={styles.countdownText}>
{`${hourString}:${minuteString}:${secondString}`}
</div>
</div>
);
2023-01-25 11:11:17 +00:00
};
2023-01-25 11:07:44 +00:00
export default Countdown;