From ade8c2e423cbdc5796f2c507a1c35ea290a23f16 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 18 Jan 2023 18:19:21 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20adicionando=20conte=C3=BAdo=20do=20v?= =?UTF-8?q?=C3=ADdeo=207.7=20at=C3=A9=207.9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react/components/Countdown/assets/box.svg | 3 + custom/react/components/Countdown/index.tsx | 73 ++++++++++++++++++- custom/react/components/Countdown/styles.css | 57 +++++++++++++++ storefront/store/blocks/pages/home/home.jsonc | 7 +- .../pages/home/agenciamagma.m3-custom.scss | 57 +++++++++++++++ 5 files changed, 192 insertions(+), 5 deletions(-) create mode 100644 custom/react/components/Countdown/assets/box.svg create mode 100644 custom/react/components/Countdown/styles.css create mode 100644 storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss diff --git a/custom/react/components/Countdown/assets/box.svg b/custom/react/components/Countdown/assets/box.svg new file mode 100644 index 0000000..9eb9c2f --- /dev/null +++ b/custom/react/components/Countdown/assets/box.svg @@ -0,0 +1,3 @@ + + + diff --git a/custom/react/components/Countdown/index.tsx b/custom/react/components/Countdown/index.tsx index b67bc19..fd0a45b 100644 --- a/custom/react/components/Countdown/index.tsx +++ b/custom/react/components/Countdown/index.tsx @@ -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
{`${hourString}:${minuteString}:${secondString}`}
; + const CSS__HANDLES = [ + "CountdownWrapper", + "CountdownBadge", + "CountdownTitle", + "CountdownText", + "CountdownBadgeClock", + "CountdownTitleHeading1", + "CountdownTitleHeading2", + "CountdownTitleHeading3", + ]; + + const handles = useCssHandles(CSS__HANDLES); + + return ( + //
+ //
+ // clock + //
+ //
+ //

ofertas

+ //

+ // Não perca tempo, + //

+ //

garanta agora

+ //
+ //
+ // {`${hourString}:${minuteString}:${secondString}`} + //
+ //
+
+
+ clock +
+
+

ofertas

+

+ Não perca tempo, +

+

+ garanta agora +

+
+
+ {`${hourString}:${minuteString}:${secondString}`} +
+
+ ); }; 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", + }, + }, +}; diff --git a/custom/react/components/Countdown/styles.css b/custom/react/components/Countdown/styles.css new file mode 100644 index 0000000..6b5d0c1 --- /dev/null +++ b/custom/react/components/Countdown/styles.css @@ -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; +} diff --git a/storefront/store/blocks/pages/home/home.jsonc b/storefront/store/blocks/pages/home/home.jsonc index 9f4e719..e3ce1be 100644 --- a/storefront/store/blocks/pages/home/home.jsonc +++ b/storefront/store/blocks/pages/home/home.jsonc @@ -17,9 +17,10 @@ // "challenge": "challenge.trade-policy-condition" // } }, - "countdown-academy":{ - "props":{ - "endDate": "20/01/2023/00:00" + "countdown-academy": { + "props": { + "endDate": "20/01/2023/00:00", + "blockClass": "countdown-academy-teste" } }, "flex-layout.row#faixa-de-imagens": { diff --git a/storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss b/storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss new file mode 100644 index 0000000..9e7e53f --- /dev/null +++ b/storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss @@ -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; +}