feature/main #1
@ -1,5 +1,6 @@
|
||||
.forms {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
@ -46,6 +47,7 @@
|
||||
&__terms {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
margin-bottom: 12px;
|
||||
|
||||
span {
|
||||
@ -103,5 +105,17 @@
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--white);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__success {
|
||||
position: absolute;
|
||||
transform: translateY(100%);
|
||||
bottom: -12.56px;
|
||||
left: 0;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: var(--green-100);
|
||||
}
|
||||
}
|
||||
|
@ -8,6 +8,10 @@
|
||||
align-items: center;
|
||||
gap: 9.72px;
|
||||
|
||||
a {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
figure {
|
||||
display: contents;
|
||||
}
|
||||
|
@ -51,17 +51,28 @@
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 42px;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: var(--red-100);
|
||||
}
|
||||
.invalid {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 42px;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: var(--red-100);
|
||||
}
|
||||
|
||||
.success {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 42px;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: var(--green-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -14,4 +14,6 @@
|
||||
--gray-400: #b9b7b7;
|
||||
|
||||
--red-100: #ff0000;
|
||||
|
||||
--green-100: #008000;
|
||||
}
|
||||
|
@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import { Formik, Form, Field, ErrorMessage } from "formik";
|
||||
import FormSchema from "../schema/FormSchema";
|
||||
import { render } from "react-dom";
|
||||
|
||||
import MaskedInput from "react-text-mask";
|
||||
|
||||
import contato from "../assets/styles/modules/Contato.module.scss";
|
||||
@ -14,6 +13,7 @@ interface IFormikValues {
|
||||
telefone: string;
|
||||
instagram: string;
|
||||
terms: boolean;
|
||||
/*sent: boolean;*/
|
||||
}
|
||||
|
||||
//setar valores iniciais
|
||||
@ -25,6 +25,7 @@ const initialValues = {
|
||||
telefone: "",
|
||||
instagram: "",
|
||||
terms: false,
|
||||
/*sent: false,*/
|
||||
};
|
||||
|
||||
const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/];
|
||||
@ -69,15 +70,26 @@ const insta = ["@"];
|
||||
const Contato = () => {
|
||||
/*const handleFormikSubmit = (values: IFormikValues, actions) => {};*/
|
||||
|
||||
/*const teste = (values: IFormikValues) => {
|
||||
if (values.sent) {
|
||||
const h2Tag = document.querySelector("#enviado") as HTMLSpanElement;
|
||||
h2Tag.innerHTML = "TESTE";
|
||||
alert("TESTANDO TESTE");
|
||||
}
|
||||
};*/
|
||||
|
||||
return (
|
||||
<div className={contato["forms"]}>
|
||||
<h2>Preencha o formulário</h2>
|
||||
|
||||
<Formik
|
||||
onSubmit={(values: IFormikValues, actions) => {
|
||||
/*values.sent = true;*/
|
||||
console.log(values);
|
||||
actions.resetForm();
|
||||
alert("formulario enviado");
|
||||
/*alert("formulario enviado");*/
|
||||
const sent = document.querySelector("#sent") as HTMLSpanElement;
|
||||
sent.innerHTML = "*Formulário enviado com sucesso!";
|
||||
}}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
@ -218,6 +230,7 @@ const Contato = () => {
|
||||
</div>
|
||||
|
||||
<button type="submit">CADASTRE-SE</button>
|
||||
<span id="sent" className={contato["forms__success"]}></span>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
|
@ -19,11 +19,14 @@ const Main = () => {
|
||||
return (
|
||||
<div className={main["main"]}>
|
||||
<div className={main["main__breadcrumb"]}>
|
||||
<a href="/">
|
||||
<figure>
|
||||
<img src={iconHome} alt="Icone Home" />
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
<figure>
|
||||
<img src={iconHome} />
|
||||
</figure>
|
||||
<figure>
|
||||
<img src={iconArrow} />
|
||||
<img src={iconArrow} alt="Icone Flecha para direita" />
|
||||
</figure>
|
||||
<span>INSTITUCIONAL</span>
|
||||
</div>
|
||||
|
@ -24,22 +24,24 @@ const Newsletter = () => {
|
||||
<Formik
|
||||
onSubmit={(values: IEmailType, actions) => {
|
||||
actions.resetForm();
|
||||
const sent = document.querySelector(
|
||||
"#emailsent"
|
||||
) as HTMLSpanElement;
|
||||
sent.innerHTML = "Email cadastrado com sucesso!";
|
||||
}}
|
||||
initialValues={{ email: "" }}
|
||||
validationSchema={NewsletterSchema}
|
||||
>
|
||||
{({ errors, touched }) => (
|
||||
<Form>
|
||||
<Field
|
||||
placeholder="E-mail"
|
||||
id="email"
|
||||
name="email"
|
||||
className={errors.email && touched.email && "invalid"}
|
||||
/>
|
||||
<ErrorMessage component="span" name="email" />
|
||||
<button type="submit">ENVIAR</button>
|
||||
</Form>
|
||||
)}
|
||||
<Form>
|
||||
<Field placeholder="E-mail" id="email" name="email" />
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className={newsletter["invalid"]}
|
||||
/>
|
||||
<button type="submit">ENVIAR</button>
|
||||
<span id="emailsent" className={newsletter["success"]}></span>
|
||||
</Form>
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user