forked from M3-Academy/m3-academy-template-vtexio
feat: aula 7.7 treinando vtex io
This commit is contained in:
parent
060e02956e
commit
a42d18f63e
@ -22,6 +22,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"husky": "^5.2.0",
|
||||
"react": "^17.0.2"
|
||||
"react": "^17.0.2",
|
||||
"scss": "^0.2.4"
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import styles from "./styles.css";
|
||||
|
||||
interface CountdownProps {
|
||||
// Fortmato: dd/mm/aaaa/hr:min
|
||||
@ -65,12 +66,25 @@ const Countdown = ({endDate}:CountdownProps) => {
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<div className={styles.CountdownWrapper}>
|
||||
|
||||
<div className={styles.CountdownTitle}>
|
||||
<h1 className={styles.texth1}>TEXTO H1</h1>
|
||||
<h3 className={styles.texth3}>TEXTO H3</h3>
|
||||
<h2 className={styles.texth2}>TEXTO H2</h2>
|
||||
</div>
|
||||
|
||||
<div className={styles.hora}>
|
||||
|
||||
{`
|
||||
${time.hour.toString().padStart(2, "0")}:
|
||||
${time.minute.toString().padStart(2, "0")}:
|
||||
${time.second.toString().padStart(2, "0")}
|
||||
`}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
43
custom/react/components/Countdown/styles.css
Normal file
43
custom/react/components/Countdown/styles.css
Normal file
@ -0,0 +1,43 @@
|
||||
.CountdownWrapper{
|
||||
border-radius: 5px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
width: 414px ;
|
||||
position: relative;
|
||||
height: 463px;
|
||||
margin-top: 30px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.CountdownTitle{
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.texth1{
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
}
|
||||
.texth3{
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.texth2{
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.hora{
|
||||
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;
|
||||
}
|
33903
package-lock.json
generated
Normal file
33903
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user