forked from M3-Academy/desafio-react-e-typescript
Compare commits
26 Commits
feature/ma
...
main
Author | SHA1 | Date | |
---|---|---|---|
e7a89c0408 | |||
|
8ed2c63678 | ||
9ffbd18e05 | |||
|
58439b8eb6 | ||
6058cf88d9 | |||
|
faa58259e4 | ||
0cb1237832 | |||
|
0aa8b6571a | ||
97e6b59a9a | |||
7956754c1e | |||
966dea18a7 | |||
1f9fe617bf | |||
def49f5b9b | |||
7160eeff9d | |||
a386aaec9c | |||
fe1c7eb3f4 | |||
d8356c4aa0 | |||
a17bc187d4 | |||
30832b5aaf | |||
cfd4a30b9c | |||
bd4c1e05f9 | |||
b9ce42cb96 | |||
26cf5d46c8 | |||
6a1e150cd8 | |||
f9502ce567 | |||
1ab79551c3 |
@ -22,12 +22,15 @@ const ButtonFloat = () => {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styleButton["wrapper"]} onClick={subirTop}>
|
||||
<IconArrowTop className={styleButton["wrapper__iconArrow"]} title="Voltar ao topo da página" />
|
||||
<IconArrowUltraWide className={styleButton["wrapper__iconArrowUltraWide"]} title="Voltar ao topo da página" />
|
||||
</div>
|
||||
)
|
||||
if (scrollPage > 140) {
|
||||
|
||||
return (
|
||||
<div className={styleButton["wrapper"]} onClick={subirTop}>
|
||||
<IconArrowTop className={styleButton["wrapper__iconArrow"]} title="Voltar ao topo da página" />
|
||||
<IconArrowUltraWide className={styleButton["wrapper__iconArrowUltraWide"]} title="Voltar ao topo da página" />
|
||||
</div>
|
||||
)
|
||||
} else return null;
|
||||
|
||||
}
|
||||
|
||||
|
@ -47,6 +47,7 @@
|
||||
align-items: flex-end;
|
||||
height: 42px;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
@ -56,6 +57,23 @@
|
||||
@media (min-width: 2500px) {
|
||||
height: 59px;
|
||||
}
|
||||
|
||||
.validation-text {
|
||||
font-family: var(--font-roboto);
|
||||
color: var(--red-100);
|
||||
position: absolute;
|
||||
top: 41px;
|
||||
font-size: 12px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
top: 50px;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
top: 58px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 340px;
|
||||
height: 42px;
|
||||
|
@ -1,21 +1,50 @@
|
||||
import React from "react"
|
||||
import { Formik, Form, Field, ErrorMessage } from "formik";
|
||||
import FormSchema from "../../../schema/FormSchemaNewsletter"
|
||||
import styleNewsletter from "./Newsletter.module.scss"
|
||||
|
||||
|
||||
export interface formValues {
|
||||
email: string;
|
||||
}
|
||||
|
||||
const initialValues: formValues = {
|
||||
email: "",
|
||||
}
|
||||
const Newsletter = () => {
|
||||
|
||||
const handleOnSubmit = (values: formValues, { resetForm }: any) => {
|
||||
resetForm({ values: '' });
|
||||
}
|
||||
return (
|
||||
<section className={styleNewsletter["container"]}>
|
||||
<div className={styleNewsletter["container__wrapper"]}>
|
||||
<p>ASSINE NOSSA NEWSLETTER</p>
|
||||
<form>
|
||||
<div className={styleNewsletter["container__wrapper__input-button"]}>
|
||||
<input type="email" placeholder="E-mail" />
|
||||
<button type="submit" aria-label="Enviar e-mail">
|
||||
ENVIAR
|
||||
</button>
|
||||
<Formik
|
||||
onSubmit={handleOnSubmit}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
{({ errors, touched }) => (
|
||||
|
||||
<section className={styleNewsletter["container"]}>
|
||||
<div className={styleNewsletter["container__wrapper"]}>
|
||||
<p>ASSINE NOSSA NEWSLETTER</p>
|
||||
|
||||
<Form>
|
||||
<div className={styleNewsletter["container__wrapper__input-button"]}>
|
||||
<ErrorMessage component="span" className={styleNewsletter["validation-text"]} name="email" />
|
||||
<Field type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="E-mail"
|
||||
className={errors.email && touched.email ? "validation-text" : null} />
|
||||
<button type="submit" aria-label="Enviar e-mail">
|
||||
ENVIAR
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
)}
|
||||
</Formik>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -18,7 +18,7 @@ const Header = () => {
|
||||
<MenuHamburguer />
|
||||
|
||||
<div className={styleHeader["container__wrapper__logo"]}>
|
||||
<a href="teste">
|
||||
<a href="/">
|
||||
<img className={styleHeader["logo-m3"]} src={logo} alt="Logo M3 Academy" />
|
||||
</a>
|
||||
</div>
|
||||
|
@ -19,7 +19,7 @@ const Cursos = () => {
|
||||
return (
|
||||
<section className={style["container"]}>
|
||||
<div className={style["container__institucional"]}>
|
||||
<IconHome className={style["home"]} title="Home" />
|
||||
<Rota to="/"><IconHome className={style["home"]} title="Home" /></Rota>
|
||||
<IconArrow className={style["arrow"]} title="Seta direita" />
|
||||
<p>CURSOS</p>
|
||||
</div>
|
||||
|
@ -136,14 +136,12 @@
|
||||
}
|
||||
}
|
||||
.cotent-button {
|
||||
margin-bottom: 69.56px;
|
||||
@media (max-width: 1024px) {
|
||||
margin-bottom: 81.56px;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
margin-bottom: 84px;
|
||||
}
|
||||
|
||||
&__form-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -63,12 +63,12 @@ const ContatoForm = () => {
|
||||
|
||||
<div className={StyleForm["form-field"]}>
|
||||
<label htmlFor="email">E-mail</label>
|
||||
<ErrorMessage component="span" className={StyleForm["validation-text"]} name="email" />
|
||||
<Field type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Seu e-mail"
|
||||
className={errors.email && touched.email ? "validation-text" : null} />
|
||||
<ErrorMessage component="span" className={StyleForm["validation-text"]} name="email" />
|
||||
</div>
|
||||
|
||||
<div className={StyleForm["form-field"]}>
|
||||
|
@ -72,8 +72,10 @@
|
||||
|
||||
&__wrapper-links-informations {
|
||||
display: flex;
|
||||
margin-bottom: 70px;
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__links {
|
||||
|
@ -17,7 +17,7 @@ const Institucional = () => {
|
||||
return (
|
||||
<section className={style["container"]}>
|
||||
<div className={style["container__institucional"]}>
|
||||
<IconHome className={style["home"]} title="Home" />
|
||||
<Rota to="/"><IconHome className={style["home"]} title="Home" /></Rota>
|
||||
<IconArrow className={style["arrow"]} title="Seta direita" />
|
||||
<p>INSTITUCIONAL</p>
|
||||
</div>
|
||||
|
@ -14,7 +14,7 @@ const Saibamais = () => {
|
||||
return (
|
||||
<section className={style["container"]}>
|
||||
<div className={style["container__institucional"]}>
|
||||
<IconHome className={style["home"]} title="Home" />
|
||||
<Rota to="/"><IconHome className={style["home"]} title="Home" /></Rota>
|
||||
<IconArrow className={style["arrow"]} title="Seta direita" />
|
||||
<p>SAIBA MAIS</p>
|
||||
</div>
|
||||
|
7
src/schema/FormSchemaNewsletter.ts
Normal file
7
src/schema/FormSchemaNewsletter.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import * as Yup from "yup"
|
||||
|
||||
|
||||
export default Yup.object().shape({
|
||||
email: Yup.string().email("E-mail Inválido").required("E-mail Inválido"),
|
||||
|
||||
});
|
Loading…
Reference in New Issue
Block a user