anacarolinaduartecavalcante/desafio-react-e-typescript-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(Contato.jsx): mudando para CSS Modules

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-07 17:35:21 -03:00
parent 477ae3ee20
commit 6760438829
1 changed files with 62 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/Main/Contato/Contato.jsx
View File

@ -1,65 +1,77 @@
import { Formik, Field, Form, ErrorMessage } from "formik";
import schema from "../schema.js";
import schema from "../schema";
import styles from "../Main.module.scss";
const Contato = () => {
return (
<div className="Contato">
<div className={styles["Contato"]}>
<h2>Preencha o formulário</h2>
<Formik
validationSchema={schema}
validateOnMount
initialValues={{ name: "", email: "" , phone: "" , cpf: "", birthDate: "" , instagram: ""}}
initialValues={{
name: "",
email: "",
phone: "",
cpf: "",
birthDate: "",
instagram: "",
}}
>
{() => (
<Form>
<div className="FormContent">
<div className="Register">
<div className="FormBlock">
<label>Nome</label>
<Field name="name" type="text" />
<span className="Error">
<ErrorMessage name="name" />
</span>
</div>
<div className="FormBlock">
<label>E-mail</label>
<Field name="email" type="email" />
<span className="Error">
<ErrorMessage className="Error" name="email" />
</span>
</div>
<div className="FormBlock">
<label>CPF</label>
<Field name="cpf" type="cpf" />
<span className="Error">
<ErrorMessage className="Error" name="cpf" />
</span>
</div>
<div className="FormBlock">
<label>Data de Nascimento:</label>
<Field name="birthDate" type="birthDate" />
<span className="Error">
<ErrorMessage className="Error" name="birthDate" />
</span>
</div>
<div className="FormBlock">
<label>Telefone:</label>
<Field name="phone" type="tel" />
<span className="Error">
<ErrorMessage className="Error" name="phone" />
</span>
</div>
<div className="FormBlock">
<label>Instagram</label>
<Field name="instagram" type="text" />
<span className="Error">
<ErrorMessage className="Error" name="instagram" />
</span>
</div>
<button type="submit">
Enviar
</button>
<div className={styles["FormContent"]}>
<div className={styles["FormContent__Field"]}>
<label>Nome</label>
<Field
name="name"
type="text"
placeholder="Seu nome completo"
/>
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="name" />
</span>
</div>
<div className={styles["FormContent__Field"]}>
<label>E-mail</label>
<Field name="email" type="email" placeholder="Seu e-mail" />
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="email" />
</span>
</div>
<div className={styles["FormContent__Field"]}>
<label>CPF</label>
<Field name="cpf" type="cpf" placeholder="000.000.000-00" />
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="cpf" />
</span>
</div>
<div className={styles["FormContent__Field"]}>
<label>Data de Nascimento:</label>
<Field
name="birthDate"
type="birthDate"
placeholder="00.00.0000"
/>
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="birthDate" />
</span>
</div>
<div className={styles["FormContent__Field"]}>
<label>Telefone:</label>
<Field name="phone" type="tel" placeholder="(00) 00000-0000" />
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="phone" />
</span>
</div>
<div className={styles["FormContent__Field"]}>
<label>Instagram</label>
<Field name="instagram" type="text" placeholder="@seuuser" />
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="instagram" />
</span>
</div>
<button type="submit">Enviar</button>
</div>
</Form>
)}