feat(home): adiciona blocos
This commit is contained in:
parent
503e4e32ff
commit
7671fbc244
88
custom/react/Teste.tsx
Normal file
88
custom/react/Teste.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
interface CoutdownProps {
|
||||
endDate: string;
|
||||
}
|
||||
|
||||
interface Time {
|
||||
hour: number;
|
||||
minute: number;
|
||||
second: number;
|
||||
}
|
||||
|
||||
const Teste = ({ endDate }: CoutdownProps) => {
|
||||
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, //mes do newdate começa em 0
|
||||
parseInt(day),
|
||||
parseInt(hour),
|
||||
parseInt(minute)
|
||||
).getTime();
|
||||
|
||||
const atualDate = new Date().getTime();
|
||||
|
||||
let difference = finalDate - atualDate;
|
||||
//transformar os milissigundos
|
||||
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,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//chamar todo segundo, assim q renderizado o componente
|
||||
useEffect(() => {
|
||||
setInterval(UpdateTimer, 1000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
TESTE CUSTOM {time.hour.toString().padStart(2, "0")}:
|
||||
{time.minute.toString().padStart(2, "0")}:
|
||||
{time.second.toString().padStart(2, "0")}
|
||||
</div>
|
||||
);
|
||||
//padstart, numero minimo de caracteres, se nao tiver, completa com 0.
|
||||
};
|
||||
|
||||
export default Teste;
|
||||
|
||||
//CRIAR O CAMPO PARA PODER EDITAR NO ADMIN SITE EDITOR
|
||||
|
||||
Teste.schema = {
|
||||
title: "Teste academy",
|
||||
type: "object",
|
||||
properties: {
|
||||
endDate: {
|
||||
title: "Data final de countdown",
|
||||
type: "string",
|
||||
default: "13/04/2023/13:54",
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -23,5 +23,8 @@
|
||||
"content": {
|
||||
"$ref": "app:agenciamagma.m3-custom#/definitions/DynamicMenu"
|
||||
}
|
||||
},
|
||||
"menu-teste": {
|
||||
"component": "Teste"
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,12 +9,74 @@
|
||||
"info-card#m3-middle-card",
|
||||
"flex-layout.row#m3-brands",
|
||||
"newsletter#m3-newsletter",
|
||||
"flex-layout.row#faixa-de-imagens",
|
||||
"menu-teste",
|
||||
"link#whatsapp"
|
||||
]
|
||||
// "parent": {
|
||||
// "challenge": "challenge.trade-policy-condition"
|
||||
// }
|
||||
},
|
||||
|
||||
"menu-teste": {
|
||||
"props": {
|
||||
"endDate": "28/01/2023/00:00"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#faixa-de-imagens": {
|
||||
"props": {
|
||||
"blockClass": "faixa-de-imagens",
|
||||
"colSizing": "auto" //cada elemento tem seu proprio tamanho, o default é EQUAL
|
||||
},
|
||||
//NOS CHILDREN, QUAIS OS BLOCOS Q VAO FICAR DENTRO
|
||||
"children": [
|
||||
"image#imagem-1",
|
||||
"flex-layout.col#imagem-meio",
|
||||
"image#imagem-3"
|
||||
]
|
||||
},
|
||||
|
||||
"flex-layout.col#imagem-meio": {
|
||||
"props": {
|
||||
"blockClass": "faixa-de-imagens"
|
||||
},
|
||||
"children": ["image#imagem-2", "flex-layout.col#conteudo-meio"]
|
||||
},
|
||||
|
||||
"flex-layout.col#conteudo-meio": {
|
||||
"children": ["rich-text#texto-meio", "link#link-meio"]
|
||||
},
|
||||
|
||||
"rich-text#texto-meio": {
|
||||
"props": {
|
||||
"text": "### teste\n # teste teste\n hahahahhaha"
|
||||
}
|
||||
},
|
||||
|
||||
"link#link-meio": {
|
||||
"props": {
|
||||
"href": "/",
|
||||
"label": "RESPONDA NOSSO QUIZ E DESCUBRA"
|
||||
}
|
||||
},
|
||||
|
||||
"image#imagem-1": {
|
||||
"props": {
|
||||
"src": "assets/imgs/institucional-img.png"
|
||||
}
|
||||
},
|
||||
"image#imagem-2": {
|
||||
"props": {
|
||||
"src": "assets/imgs/institucional-img.png"
|
||||
}
|
||||
},
|
||||
"image#imagem-3": {
|
||||
"props": {
|
||||
"src": "assets/imgs/institucional-img.png"
|
||||
}
|
||||
},
|
||||
|
||||
"challenge.trade-policy-condition": {
|
||||
"props": {
|
||||
"redirectPath": "/registration",
|
||||
|
||||
3
storefront/styles/sass/pages/home/vtex.flex-layout.scss
Normal file
3
storefront/styles/sass/pages/home/vtex.flex-layout.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.container--m3-shelf-title {
|
||||
border: 1px solid red;
|
||||
}
|
||||
@ -3,10 +3,11 @@
|
||||
.container--m3-shelf-title {
|
||||
margin-top: 80px;
|
||||
margin-bottom: 40px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.heading--m3-shelf-title {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
|
||||
24
yarn.lock
24
yarn.lock
@ -2,13 +2,6 @@
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
"@agenciam3/pkg@^1.1.13":
|
||||
version "1.1.13"
|
||||
resolved "https://gitlab.com/api/v4/projects/21631951/packages/npm/@agenciam3/pkg/-/@agenciam3/pkg-1.1.13.tgz#1e5c0e831d325f46bfbfd65e3347949b6be69c5d"
|
||||
integrity sha1-HlwOgx0yX0a/v9ZeM0eUm2vmnF0=
|
||||
dependencies:
|
||||
"@types/jquery" "^3.5.1"
|
||||
|
||||
"@babel/code-frame@7.12.11":
|
||||
version "7.12.11"
|
||||
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
|
||||
@ -2041,13 +2034,6 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
|
||||
integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==
|
||||
|
||||
"@types/jquery@^3.5.1":
|
||||
version "3.5.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.6.tgz#97ac8e36dccd8ad8ed3f3f3b48933614d9fd8cf0"
|
||||
integrity sha512-SmgCQRzGPId4MZQKDj9Hqc6kSXFNWZFHpELkyK8AQhf8Zr6HKfCzFv9ZC1Fv3FyQttJZOlap3qYb12h61iZAIg==
|
||||
dependencies:
|
||||
"@types/sizzle" "*"
|
||||
|
||||
"@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8":
|
||||
version "7.0.9"
|
||||
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
|
||||
@ -2083,11 +2069,6 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
|
||||
integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
|
||||
|
||||
"@types/sizzle@*":
|
||||
version "2.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"
|
||||
integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
|
||||
|
||||
"@typescript-eslint/eslint-plugin@^2.17.0":
|
||||
version "2.34.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9"
|
||||
@ -6687,6 +6668,11 @@ lru-queue@^0.1.0:
|
||||
dependencies:
|
||||
es5-ext "~0.10.2"
|
||||
|
||||
m3-utils@^0.1.0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/m3-utils/-/m3-utils-0.1.0.tgz#0e0ebe1a108263ab23ce53bdee8beab5a1a0e4a8"
|
||||
integrity sha512-N8bdQwPBeiTnOIzWKweN4rI683Lmm/xbXpfy1PqQLjqIZZcgh1eidq9Spab1RogK3DPQ9hlmvAyl4wGW6rmJmQ==
|
||||
|
||||
make-dir@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user