From 7b17b6860ff902e2c407f46ef81f472be69c8d5e Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Wed, 11 Jan 2023 17:12:33 -0300
Subject: [PATCH] refactor(Contato.tsx): adicionando componente FormField na
 estrutura do Contato

---
 src/components/Main/Contato/Contato.tsx | 59 ++++---------------------
 1 file changed, 8 insertions(+), 51 deletions(-)

diff --git a/src/components/Main/Contato/Contato.tsx b/src/components/Main/Contato/Contato.tsx
index e7aba35..c856fd9 100644
--- a/src/components/Main/Contato/Contato.tsx
+++ b/src/components/Main/Contato/Contato.tsx
@@ -1,6 +1,7 @@
-import { Formik, Field, Form, ErrorMessage } from "formik";
+import { Formik, Field, Form } from "formik";
 import schema from "../schema";
 import styles from "../Main.module.scss";
+import { FormField } from "../Contato/FormContentField/FormContentField";
 import { useState } from "react";
 
 interface FormArea {
@@ -51,56 +52,12 @@ const Contato = () => {
         {() => (
           <Form>
             <div className={styles["FormContent"]}>
-              <div className={styles["FormContent__Field"]}>
-                <label>Nome</label>
-                <span className={styles["FormContent__Field__Error"]}>
-                  <ErrorMessage name="name" />
-                </span>
-                <Field
-                  name="name"
-                  type="text"
-                  placeholder="Seu nome completo"
-                />
-              </div>
-              <div className={styles["FormContent__Field"]}>
-                <label>E-mail</label>
-                <span className={styles["FormContent__Field__Error"]}>
-                  <ErrorMessage name="email" />
-                </span>
-                <Field name="email" type="email" placeholder="Seu e-mail" />
-              </div>
-              <div className={styles["FormContent__Field"]}>
-                <label>CPF</label>
-                <span className={styles["FormContent__Field__Error"]}>
-                  <ErrorMessage name="cpf" />
-                </span>
-                <Field name="cpf" type="cpf" placeholder="000.000.000-00" />
-              </div>
-              <div className={styles["FormContent__Field"]}>
-                <label>Data de Nascimento:</label>
-                <span className={styles["FormContent__Field__Error"]}>
-                  <ErrorMessage name="birthDate" />
-                </span>
-                <Field
-                  name="birthDate"
-                  type="birthDate"
-                  placeholder="00.00.0000"
-                />
-              </div>
-              <div className={styles["FormContent__Field"]}>
-                <label>Telefone:</label>
-                <span className={styles["FormContent__Field__Error"]}>
-                  <ErrorMessage name="phone" />
-                </span>
-                <Field name="phone" type="tel" placeholder="(00) 00000-0000" />
-              </div>
-              <div className={styles["FormContent__Field"]}>
-                <label>Instagram</label>
-                <span className={styles["FormContent__Field__Error"]}>
-                  <ErrorMessage name="instagram" />
-                </span>
-                <Field name="instagram" type="text" placeholder="@seuuser" />
-              </div>
+              <FormField title="Nome" name="name" type="text" placeholder="Seu nome completo"/>
+              <FormField title="E-mail" name="email" type="email" placeholder="Seu e-mail"/> 
+              <FormField title="CPF" name="cpf" type="cpf" placeholder="000.000.000-00"/>
+              <FormField title="Data de Nascimento:" name="birthDate" type="birthDate" placeholder="00.00.0000"/>
+              <FormField title="Telefone:" name="phone" type="tel" placeholder="(00) 00000-0000"/>
+              <FormField title="Instagram" name="instagram" type="text" placeholder="@seuuser"/>         
               <div className={styles["Confirm__Camp"]}>
                 <span className={styles["Confirm__Camp__Asterisk"]}>*</span>
                 <span className={styles["Confirm__Camp__Text"]}>