forked from M3-Academy/desafio-react-e-typescript
Compare commits
No commits in common. "main" and "feature/main" have entirely different histories.
main
...
feature/ma
@ -22,15 +22,12 @@ const ButtonFloat = () => {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
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;
|
||||
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>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
|
@ -47,7 +47,6 @@
|
||||
align-items: flex-end;
|
||||
height: 42px;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
@ -57,23 +56,6 @@
|
||||
@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,50 +1,21 @@
|
||||
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 (
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</Formik>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -18,7 +18,7 @@ const Header = () => {
|
||||
<MenuHamburguer />
|
||||
|
||||
<div className={styleHeader["container__wrapper__logo"]}>
|
||||
<a href="/">
|
||||
<a href="teste">
|
||||
<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"]}>
|
||||
<Rota to="/"><IconHome className={style["home"]} title="Home" /></Rota>
|
||||
<IconHome className={style["home"]} title="Home" />
|
||||
<IconArrow className={style["arrow"]} title="Seta direita" />
|
||||
<p>CURSOS</p>
|
||||
</div>
|
||||
|
@ -136,12 +136,14 @@
|
||||
}
|
||||
}
|
||||
.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,10 +72,8 @@
|
||||
|
||||
&__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"]}>
|
||||
<Rota to="/"><IconHome className={style["home"]} title="Home" /></Rota>
|
||||
<IconHome className={style["home"]} title="Home" />
|
||||
<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"]}>
|
||||
<Rota to="/"><IconHome className={style["home"]} title="Home" /></Rota>
|
||||
<IconHome className={style["home"]} title="Home" />
|
||||
<IconArrow className={style["arrow"]} title="Seta direita" />
|
||||
<p>SAIBA MAIS</p>
|
||||
</div>
|
||||
|
@ -1,7 +0,0 @@
|
||||
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