From 4e339aac7730496dcab36717187173e97f885deb Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Sun, 15 Jan 2023 10:48:09 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20cria=20formulario,=20valida=C3=A7=C3=A3?= =?UTF-8?q?o=20e=20regex=20do=20formulario?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +- src/_variaveis.scss | 16 +++ .../Accordion/styles/Accordion.module.scss | 2 +- src/components/Main/Fom/ContactForm.tsx | 108 ++++++++++++++++++ src/components/Main/Main.tsx | 3 + src/pages/Home.tsx | 4 +- src/schema/ContactFormSchema.ts | 20 ++++ src/schema/ContactValidations.ts | 3 + yarn.lock | 79 ++++++++++++- 9 files changed, 232 insertions(+), 7 deletions(-) create mode 100644 src/components/Main/Fom/ContactForm.tsx create mode 100644 src/schema/ContactFormSchema.ts create mode 100644 src/schema/ContactValidations.ts diff --git a/package.json b/package.json index fbb8d79..fd39bdd 100644 --- a/package.json +++ b/package.json @@ -10,13 +10,15 @@ "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", + "formik": "^2.2.9", "node-sass": "^8.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-headless-accordion": "^1.0.2", "react-scripts": "5.0.1", "typescript": "^4.4.2", - "web-vitals": "^2.1.0" + "web-vitals": "^2.1.0", + "yup": "^0.32.11" }, "scripts": { "start": "react-scripts start", diff --git a/src/_variaveis.scss b/src/_variaveis.scss index 95e0905..16bcac5 100644 --- a/src/_variaveis.scss +++ b/src/_variaveis.scss @@ -24,6 +24,22 @@ $color-blue2: #00C8FF; $color-green: #4caf50; + +$color-black: #000; +$color-black-800: #100d0e; + +$color-white: #fff; +$color-white-100: #f0f0f0; +$color-white-500: #e5e5e5; + +$color-gray: #c4c4c4; +$color-gray-300: #b9b7b7; +$color-gray-500: #7d7d7d; +$color-gray-700: #303030; +$color-gray-800: #292929; + +$color-red: #ff0000; + /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, diff --git a/src/components/Footer/Accordion/styles/Accordion.module.scss b/src/components/Footer/Accordion/styles/Accordion.module.scss index c7a3d2c..3ec6133 100644 --- a/src/components/Footer/Accordion/styles/Accordion.module.scss +++ b/src/components/Footer/Accordion/styles/Accordion.module.scss @@ -24,7 +24,7 @@ h5 { max-width: 707px; height: 139px; - @media (min-width:250px) { + @media (min-width:2500px) { max-width: 1531px; diff --git a/src/components/Main/Fom/ContactForm.tsx b/src/components/Main/Fom/ContactForm.tsx new file mode 100644 index 0000000..da1a62d --- /dev/null +++ b/src/components/Main/Fom/ContactForm.tsx @@ -0,0 +1,108 @@ +import { Formik, Form, Field, ErrorMessage } from "formik"; +import contactFormSchema from "../../../schema/ContactFormSchema"; +import styleForm from "./ContactForm.module.scss"; + + + +interface IFormikValues { + name: string; + email: string; + cpf: string; + dateBirth: string; + phone: string; + instagram?: string; + checkbox: boolean; +} + +const initialValues = { + name: "", + email: "", + cpf: "", + dateBirth: "", + phone: "", + instagram: "", + checkbox: false, +}; + +const formSubmit = (values: IFormikValues) => { + console.log(values); +}; + +export const ContactForm = () => { + return ( + + {({ errors, touched }) => ( +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + )} +
+ ); +}; diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx index c5845e0..2599e83 100644 --- a/src/components/Main/Main.tsx +++ b/src/components/Main/Main.tsx @@ -1,8 +1,11 @@ import React from "react"; +import "./Main.module.scss"; export const Main = () => { return ( +
+ ); } \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 1c43ea5..be34808 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,14 +1,14 @@ import React from "react"; import { Footer } from "../components/Footer/Footer"; -import { Rodape } from "../components/Footer/Rodape/Rodape"; import { Header } from "../components/Header/Header"; +import { Main } from "../components/Main/Main"; export const Home = () => { return ( <>
- +