diff --git a/src/components/main-content.module.scss b/src/components/main-content.module.scss index cde7154..4abca05 100644 --- a/src/components/main-content.module.scss +++ b/src/components/main-content.module.scss @@ -2,9 +2,8 @@ .main-content-container { width: 100%; - // height: 588px; background: variables.$color-white; - // padding-top: 40px; + padding: 40px 0; .main-content-wrapper { width: 80.46875%; @@ -18,13 +17,16 @@ .main-content-list { width: 29.32038%; + height: 285px; + border-right: 1px solid variables.$color-black; @media screen and (max-width: 1024px) { width: 100%; + border: 0; } .main-content-item { - padding: 10px 0 16px 16px; + padding: 5px 0 5px 16px; @media screen and (max-width: 1024px) { padding: 10px 16px; @@ -49,14 +51,13 @@ .main-content-text { width: 72.62135%; - border-left: 1px solid variables.$color-black; @media screen and (max-width: 1024px) { width: 100%; border: 0; } - div { + .main-content-text-wrapper { margin-left: 30px; @media screen and (max-width: 1024px) { diff --git a/src/components/main/components/Contato.tsx b/src/components/main/components/Contato.tsx index 2620b10..abcbd06 100644 --- a/src/components/main/components/Contato.tsx +++ b/src/components/main/components/Contato.tsx @@ -1,5 +1,6 @@ import React from "react"; import { MainMenu } from "./MainMenu"; +import { MainForm } from "./MainForm"; import style from "../../main-content.module.scss"; @@ -9,7 +10,8 @@ const Contato = () => {
-

Contato

+

Preencha o formulário

+
diff --git a/src/components/main/components/MainForm.tsx b/src/components/main/components/MainForm.tsx new file mode 100644 index 0000000..544b024 --- /dev/null +++ b/src/components/main/components/MainForm.tsx @@ -0,0 +1,124 @@ +import React from "react"; +import { Field, Form, Formik, ErrorMessage } from "formik"; + +import style from "../../main/components/main-form.module.scss"; +import FormMainSchema from "../../../schema/FormMainSchema"; + +interface IFormMain { + name: string; + email: string; + cpf: string; + datee: string; + tel: string; + inst: string; + check: boolean; +} + +const initialValues = { + name: "", + email: "", + cpf: "", + datee: "", + tel: "", + inst: "", + check: false, +}; + +const MainForm = () => { + return ( +
+ { + console.log(values); + resetForm(); + }} + initialValues={initialValues} + validationSchema={FormMainSchema} + > + {({ errors, touched, isSubmitting }) => ( +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+ +
+ +
+ + +
+ )} +
+
+ ); +}; + +export { MainForm }; diff --git a/src/components/main/components/main-form.module.scss b/src/components/main/components/main-form.module.scss new file mode 100644 index 0000000..f75c72c --- /dev/null +++ b/src/components/main/components/main-form.module.scss @@ -0,0 +1,78 @@ +@use "../../../variables.module.scss"; + +.main-form-container { + width: 100%; + height: 650px; + + .main-form { + width: 100%; + height: 600px; + display: flex; + flex-direction: column; + + .main-form-item-wrapper { + display: flex; + flex-direction: column; + + label { + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: variables.$color-black4; + + margin-left: 15px; + margin-bottom: 12px; + } + + input { + padding: 15px 20px; + border: 1px solid variables.$color-black4; + border-radius: 25px; + + margin-bottom: 12px; + } + } + + .main-form-checkbox { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 12px; + + input { + margin-left: 4.28px; + } + + .main-form-dot, + .main-form-span { + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + + .main-form-dot { + color: variables.$color-red; + } + + .main-form-span { + color: variables.$color-black4; + text-decoration: underline; + } + } + + .main-form-button { + font-weight: 400; + font-size: 16px; + line-height: 19px; + letter-spacing: 0.05em; + color: variables.$color-white; + + outline: 0; + border: 0; + padding: 17px 0; + + background: variables.$color-black; + border-radius: 25px; + } + } +} diff --git a/src/schema/FormMainSchema.ts b/src/schema/FormMainSchema.ts new file mode 100644 index 0000000..c2853a1 --- /dev/null +++ b/src/schema/FormMainSchema.ts @@ -0,0 +1,37 @@ +import * as Yup from "yup"; + +const getFormatedDate = (currentDate: string) => { + return currentDate.split("/").reverse().join("-"); +}; + +const getFormatedCPF = (currentCPF: string) => { + return currentCPF.split(".").reverse().join("-"); +}; + +const getFormatedTel = (currentTel: string) => { + return currentTel.split("()").reverse().join("-"); +}; + +const getFormatedInst = (currentInst: string) => { + return currentInst.split("@").join("@"); +}; + +export default Yup.object().shape({ + name: Yup.string() + .min(2, "Nome deve conter pelo menos 2 letras!") + .required("*Campo Obrigatório"), + email: Yup.string().required("*Campo Obrigatório").email("Email inválido"), + cpf: Yup.string() + .min(11, getFormatedCPF("111.111.111-11")) + .required("*Campo Obrigatório"), + datee: Yup.date() + .min(getFormatedDate("01/01/1900")) + .required("*Campo Obrigatório"), + tel: Yup.string() + .min(11, getFormatedTel("(22)99999-9999")) + .required("*Campo Obrigatório"), + inst: Yup.string().min(3, getFormatedInst("@seuuser")).notRequired(), + check: Yup.boolean() + .oneOf([true], "Você deve aceitar os termos!") + .required("*Campo Obrigatório"), +}); diff --git a/src/variables.module.scss b/src/variables.module.scss index 5e72221..b5018c4 100644 --- a/src/variables.module.scss +++ b/src/variables.module.scss @@ -9,6 +9,7 @@ $font-primary: "Roboto", sans-serif; $color-black: #000000; $color-black2: #292929; $color-black3: #303030; +$color-black4: #100d0e; $color-white: #ffffff;