SabrinaMiranda/m3-academy-template-vtexio-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/m3-academy-template-vtexio
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: SabrinaMiranda:ceba5c3e47d3558e3250d0dac298e8966f3c3499
Branches Tags
SabrinaMiranda:main
SabrinaMiranda:develop
SabrinaMiranda:feature/treino
..
compare: SabrinaMiranda:7d85b252e3fd479e8dcaa908dff0828a37468e90
Branches Tags
SabrinaMiranda:develop
SabrinaMiranda:feature/treino
SabrinaMiranda:main

No commits in common. "ceba5c3e47d3558e3250d0dac298e8966f3c3499" and "7d85b252e3fd479e8dcaa908dff0828a37468e90" have entirely different histories.
ceba5c3e47 ... 7d85b252e3

7 changed files with 0 additions and 201 deletions
Show Stats Expand all files Collapse all files

3
custom/react/Countdown.tsx
View File

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

11
custom/react/components/Countdown/assets/clock.svg
View File

@ -1,11 +0,0 @@
<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#ffffff" height="25px" width="25px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
<g>
<g>
<path d="m256,51.8c-112.6,0-204.2,91.6-204.2,204.2s91.6,204.2 204.2,204.2 204.2-91.6 204.2-204.2-91.6-204.2-204.2-204.2v-1.42109e-14zm0,449.2c-135.1,0-245-109.9-245-245s109.9-245 245-245 245,109.9 245,245-109.9,245-245,245z"/>
<path d="m344.1,276.4h-88.1c-11.3,0-20.4-9.1-20.4-20.4v-157.8c0-11.3 9.1-20.4 20.4-20.4 11.3,0 20.4,9.1 20.4,20.4v137.4h67.7c11.3,0 20.4,9.1 20.4,20.4 5.68434e-14,11.3-9.1,20.4-20.4,20.4z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 884 B

BIN
custom/react/components/Countdown/assets/textura.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

97
custom/react/components/Countdown/index.tsx
View File

@ -1,97 +0,0 @@
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
});
}else {
setTime({
hour: hours,
minute: minutes,
second: seconds
});
}
};
useEffect(() => {
setInterval(updateTimer, 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 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>
);
};
export default Countdown;

79
custom/react/components/Countdown/styles.css
View File

@ -1,79 +0,0 @@
.countdownWrapper {
background-image: url(./assets/textura.jpg);
background-repeat: no-repeat;
background-size: contain;
background-color: #c70042;
width: 414px;
height: 414px;
border-radius: 30px;
background-blend-mode: multiply;
position: relative;
margin-top: 30px;
margin-left: 8px;
}
.countdownTitle {
color: white;
text-align: center;
padding-top: 40px;
}
.countdownHeading1 {
margin: 0;
font-size: 40px;
line-height: 48px;
letter-spacing: -0,05em;
}
.countdownHeading3 {
margin: 0;
font-size: 18px;
line-height: 20px;
letter-spacing: -0,05em;
font-weight: 300;
}
.countdownHeading2 {
margin: 0;
font-size: 26px;
line-height: 30px;
letter-spacing: -0,05em;
}
.countdownText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: 200;
letter-spacing: 0.1em;
color: white;
width: 170px;
height: 170px;
border-radius: 50%;
border: 2px solid #ffffff15;
display: grid;
place-items: center;
margin-top: 30px;
}
.countdownBadge {
position: absolute;
top: 30px;
right: 0;
background-color: rgb(1, 185, 185);
border-radius: 80px 0 0 80px;
padding: 10px 10px 6px 34px;
}

4
custom/store/interfaces.json
View File

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

7
storefront/store/blocks/pages/home/home.jsonc
View File

@ -5,7 +5,6 @@
"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",
@ -18,12 +17,6 @@
// }
},
"countdown-academy": {
"props" : {
"endDate": "31/01/2023/12:30"
}
},
"flex-layout.row#faixa-de-imagens": {
"props": {
"blockClass": "faixa-de-imagens"