diff --git a/custom/react/TwoCountdown.tsx b/custom/react/TwoCountdown.tsx new file mode 100644 index 0000000..d1648c7 --- /dev/null +++ b/custom/react/TwoCountdown.tsx @@ -0,0 +1,3 @@ +import TwoCountdown from "./components/TwoCountdown/indexTwo"; + +export default TwoCountdown; diff --git a/custom/react/components/Countdown/index.tsx b/custom/react/components/Countdown/index.tsx index 18408c2..f604a22 100644 --- a/custom/react/components/Countdown/index.tsx +++ b/custom/react/components/Countdown/index.tsx @@ -1,4 +1,3 @@ - import React, { useEffect, useState } from "react"; import styles from "./styles.css"; @@ -95,3 +94,15 @@ const Countdown = ({endDate}: CountdownProps) => { }; export default Countdown; + +Countdown.schema = { + title: "Countdown Academy", + type: "object", + properties: { + endDate: { + title: "Data final de countdown", + type: "string", + default: "31/01/2023/12:30" + } + } +}; diff --git a/custom/react/components/Countdown/styles.css b/custom/react/components/Countdown/styles.css index 569a9ea..a22e35d 100644 --- a/custom/react/components/Countdown/styles.css +++ b/custom/react/components/Countdown/styles.css @@ -11,8 +11,7 @@ position: relative; - margin-top: 30px; - margin-left: 8px; + margin: 30px auto 0 auto; } .countdownTitle { diff --git a/custom/react/components/TwoCountdown/assets/clock.svg b/custom/react/components/TwoCountdown/assets/clock.svg new file mode 100644 index 0000000..0bcc64f --- /dev/null +++ b/custom/react/components/TwoCountdown/assets/clock.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/custom/react/components/TwoCountdown/indexTwo.tsx b/custom/react/components/TwoCountdown/indexTwo.tsx new file mode 100644 index 0000000..f8a8baf --- /dev/null +++ b/custom/react/components/TwoCountdown/indexTwo.tsx @@ -0,0 +1,123 @@ +import React, { useEffect, useState } from "react"; + +import { useCssHandles } from "vtex.css-handles"; + +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 TwoCountdown = ({endDate}: CountdownProps) => { + + const [time, setTime] = useState