anacarolinaduartecavalcante/m3-academy-template-vtexio-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-vtexio
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adicionando conteúdo do vídeo 7.7 até 7.9

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-18 18:19:21 -03:00
parent ee57b132f9
commit ade8c2e423
5 changed files with 192 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
custom/react/components/Countdown/assets/box.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.9953 5.91909C23.9673 5.66095 23.8069 5.43248 23.5671 5.32059L12.3171 0.0705918C12.1161 -0.0232051 11.8838 -0.0232051 11.6828 0.0705918L0.432797 5.32059C0.193078 5.43248 0.0326719 5.6609 0.00459375 5.91909C0.00398437 5.92448 0 5.99629 0 6.00023V18.7502C0 19.0569 0.186703 19.3327 0.471469 19.4466L11.7215 23.9466C11.8109 23.9823 11.9055 24.0002 12 24.0002C12.0945 24.0002 12.1891 23.9824 12.2785 23.9466L23.5285 19.4466C23.8133 19.3327 24 19.0569 24 18.7502V6.00023C24 5.99629 23.9959 5.92444 23.9953 5.91909ZM12 1.57786L21.363 5.94726L17.7577 7.38942L8.21845 3.34261L12 1.57786ZM6.38953 4.19611L15.7808 8.18015L12 9.69244L2.637 5.94726L6.38953 4.19611ZM1.5 7.10798L11.25 11.008V22.1424L1.5 18.2424V7.10798ZM12.75 22.1425V11.008L22.5 7.10798V18.2424L12.75 22.1425Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 896 B

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

@ -1,4 +1,7 @@
import React, { useState, useEffect } from "react";
// import styles from "./styles.css";
import clock from "./assets/box.svg";
import { useCssHandles } from "vtex.css-handles";
interface CountdownProps {
//formato: dd/mm/yyyy/hh:mm
@ -35,7 +38,7 @@ const Countdown = ({ endDate }: CountdownProps) => {
difference = difference - minutes * 1000 * 60;
const seconds = Math.floor(difference / 1000);
if (hours <= 0 && minutes <= 0 && seconds <= 0) {
if (hours <= 0) {
setTime({ hour: 0, minute: 0, second: 0 });
} else {
setTime({ hour: hours, minute: minutes, second: seconds });
@ -50,7 +53,73 @@ const Countdown = ({ endDate }: CountdownProps) => {
const minuteString = time.minute.toString().padStart(2, "0");
const secondString = time.second.toString().padStart(2, "0");
return <div>{`${hourString}:${minuteString}:${secondString}`}</div>;
const CSS__HANDLES = [
"CountdownWrapper",
"CountdownBadge",
"CountdownTitle",
"CountdownText",
"CountdownBadgeClock",
"CountdownTitleHeading1",
"CountdownTitleHeading2",
"CountdownTitleHeading3",
];
const handles = useCssHandles(CSS__HANDLES);
return (
// <div className={styles.CountdownWrapper}>
// <div className={styles.CountdownBadge}>
// <img
// className={styles.CountdownBadgeClock}
// src={clock}
// alt="clock"
// />
// </div>
// <div className={styles.CountdownTitle}>
// <h1 className={styles.CountdownTitleHeading1}>ofertas</h1>
// <h3 className={styles.CountdownTitleHeading3}>
// Não perca tempo,
// </h3>
// <h2 className={styles.CountdownTitleHeading2}>garanta agora</h2>
// </div>
// <div className={styles.CountdownText}>
// {`${hourString}:${minuteString}:${secondString}`}
// </div>
// </div>
<div className={handles.CountdownWrapper}>
<div className={handles.CountdownBadge}>
<img
className={handles.CountdownBadgeClock}
src={clock}
alt="clock"
/>
</div>
<div className={handles.CountdownTitle}>
<h1 className={handles.CountdownTitleHeading1}>ofertas</h1>
<h3 className={handles.CountdownTitleHeading3}>
Não perca tempo,
</h3>
<h2 className={handles.CountdownTitleHeading2}>
garanta agora
</h2>
</div>
<div className={handles.CountdownText}>
{`${hourString}:${minuteString}:${secondString}`}
</div>
</div>
);
};
export default Countdown;
Countdown.schema = {
title: "Countdown Academy",
type: "object",
properties: {
endDate: {
title: "Data final de countdown",
type: "string",
default: "20/01/2023/00:00",
},
},
};

57
custom/react/components/Countdown/styles.css Normal file
View File

@ -0,0 +1,57 @@
.CountdownWrapper{
background-image: linear-gradient(to top, #4e1d52 0%, #7b049f 100%);
width: 414px;
height: 463px;
border-radius: 30px;
position: relative;
}
.CountdownTitle{
color: white;
text-align: center;
padding-top: 40px;
}
.CountdownTitleHeading1{
margin: 0;
font-size: 40px;
line-height: 48px;
letter-spacing: -0.05em;
}
.CountdownTitleHeading3{
margin: 0;
font-size: 18px;
line-height: 20px;
letter-spacing: -0.05em;
font-weight: 300;
}
.CountdownTitleHeading2{
margin: 0;
font-size: 26px;
line-height: 20px;
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 #ffffff10;
display: grid;
place-items: center;
}
.CountdownBadge{
position: absolute;
top: 30px;
right: 0;
background: #47bb77;
border-radius: 80px 0 0 80px;
padding: 8px 10px 6px 34px;
}

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

@ -19,7 +19,8 @@
},
"countdown-academy": {
"props": {
"endDate": "20/01/2023/00:00"
"endDate": "20/01/2023/00:00",
"blockClass": "countdown-academy-teste"
}
},
"flex-layout.row#faixa-de-imagens": {

57
storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss Normal file
View File

@ -0,0 +1,57 @@
.CountdownWrapper {
background-image: linear-gradient(to top, #4e1d52 0%, #7b049f 100%);
width: 414px;
height: 463px;
border-radius: 30px;
position: relative;
}
.CountdownTitle {
color: white;
text-align: center;
padding-top: 40px;
}
.CountdownTitleHeading1 {
margin: 0;
font-size: 40px;
line-height: 48px;
letter-spacing: -0.05em;
}
.CountdownTitleHeading3 {
margin: 0;
font-size: 18px;
line-height: 20px;
letter-spacing: -0.05em;
font-weight: 300;
}
.CountdownTitleHeading2 {
margin: 0;
font-size: 26px;
line-height: 20px;
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 #ffffff10;
display: grid;
place-items: center;
}
.CountdownBadge {
position: absolute;
top: 30px;
right: 0;
background: #47bb77;
border-radius: 80px 0 0 80px;
padding: 8px 10px 6px 34px;
}