From a001e46a99441ef9b2bc387fb65ba4795a56e114 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Tue, 10 Jan 2023 05:38:54 -0300 Subject: [PATCH] =?UTF-8?q?feat(institucional):formul=C3=A1rio=20de=20cont?= =?UTF-8?q?ato=20estruturado?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit html e css aplicado e formik funcional, os campos resetam ao serem enviados --- .../src/components/modules/home.module.scss | 49 ++++++++++- .../scripts/moleculas/InputForm.tsx | 22 +++++ .../components/scripts/moleculas/Title.tsx | 5 ++ desafio-5/src/components/utils/Variables.scss | 2 + desafio-5/src/pages/Institucional.tsx | 85 +++++++++++++++++-- 5 files changed, 154 insertions(+), 9 deletions(-) create mode 100644 desafio-5/src/components/scripts/moleculas/InputForm.tsx diff --git a/desafio-5/src/components/modules/home.module.scss b/desafio-5/src/components/modules/home.module.scss index 7010e04..5e2dc0b 100644 --- a/desafio-5/src/components/modules/home.module.scss +++ b/desafio-5/src/components/modules/home.module.scss @@ -1,6 +1,6 @@ @import "../utils/Variables.scss"; .hiden{ - display: none; + display: none !important; } .active{ display: block; @@ -98,11 +98,51 @@ width: 100%; min-width: 748px; #Sobre, - #Contato{ + #contact{ width: 100%; } - #Contato{ - background: pink; + #contact{ + display: flex; + flex-direction: column; + gap :12px; + .contactTitlte{ + font-family: 'Roboto',sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 28px; + } + .form{ + &_col{ + display: flex; + flex-direction: column; + gap: 12px; + Label{ + padding: 0 20px; + font-family: 'Roboto',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $-black-100E; + } + input{ + width: 748px; + height: 46px; + border: 1px solid $-black-100E; + border-radius: 25px; + padding: 15px 20px; + } + input[placeholder]{ + font-family: 'Roboto',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $-gray-B97; + } + } + } } #title{ font-family: 'Roboto',sans-serif; @@ -187,6 +227,7 @@ &-departaments{ min-width: 280px; border-right: 0; + width: 100%; } &-section{ min-width: 280px; diff --git a/desafio-5/src/components/scripts/moleculas/InputForm.tsx b/desafio-5/src/components/scripts/moleculas/InputForm.tsx new file mode 100644 index 0000000..7b075be --- /dev/null +++ b/desafio-5/src/components/scripts/moleculas/InputForm.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Field, FormikHelpers } from 'formik'; + +interface titleName { + type:string + required?:boolean + Labeltrack?:string; + className?: string; + Inputclass?: string; + id?: string; + Label?: string; + placeholder?: string; +} + +export const Inputform: React.FC = ({ type,Labeltrack,className,Inputclass,id,Label,placeholder, required = false}) => { + return( +
+ + +
+ ) +}; \ No newline at end of file diff --git a/desafio-5/src/components/scripts/moleculas/Title.tsx b/desafio-5/src/components/scripts/moleculas/Title.tsx index 0414fe5..c52f36f 100644 --- a/desafio-5/src/components/scripts/moleculas/Title.tsx +++ b/desafio-5/src/components/scripts/moleculas/Title.tsx @@ -15,4 +15,9 @@ export const BreadcrumbTitle: React.FC = ({ nameTitle,className }) = return (
{nameTitle}
) +} +export const FormTitle: React.FC = ({ nameTitle,className }) => { + return ( +

{nameTitle}

+ ) } \ No newline at end of file diff --git a/desafio-5/src/components/utils/Variables.scss b/desafio-5/src/components/utils/Variables.scss index 7af2bbe..a847752 100644 --- a/desafio-5/src/components/utils/Variables.scss +++ b/desafio-5/src/components/utils/Variables.scss @@ -1,5 +1,6 @@ // colors $-black : #000000; +$-black-100E : #100D0E; $-white:#ffffff; $-gray: #D6D6D6; $-gray-light:#e5e5e5; @@ -10,6 +11,7 @@ $-gray-400:#C6C6C6; $-gray-500:#858585; $-gray-bold:#7D7D7D;; $-gray-600:#333333; +$-gray-B97:#B9B7B7; $-prisma: #FF5A5F; $-crimson: rgb(156, 4, 34); $-shockPink:rgb(220, 20, 60); \ No newline at end of file diff --git a/desafio-5/src/pages/Institucional.tsx b/desafio-5/src/pages/Institucional.tsx index d53881e..b2b46a5 100644 --- a/desafio-5/src/pages/Institucional.tsx +++ b/desafio-5/src/pages/Institucional.tsx @@ -1,19 +1,41 @@ import React, { useState, useEffect, useRef, useMemo, useCallback,useContext} from "react" +import { Formik,Form, Field, FormikHelpers } from 'formik'; import Homeicon from "../components/assets/icons/home_icon.svg" import Leftarrow from "../components/assets/icons/Leftarrow.svg" import MainStyles from "../components/modules/home.module.scss" -import { Title,BreadcrumbTitle } from "../components/scripts/moleculas/Title" +import { Title,BreadcrumbTitle,FormTitle } from "../components/scripts/moleculas/Title" +import { Inputform } from "../components/scripts/moleculas/InputForm" const title = "INSTITUCIONAL" +interface FormTypes{ + name:string + insta:string, + phone: string, + cpf: string, + date: string, + email: string +} +const initialValues = { + name:"", + insta:"", + phone: "", + cpf: "", + date: "", + email: "" +} + const Home = () =>{ - console.log(MainStyles) const [activeSection, setActiveSection] = useState("Sobre"); const handleClick = (section:string) => { setActiveSection(section); } + const handleFormikSubmit = (values:FormTypes, formik: FormikHelpers) =>{ + console.log(values) + formik.resetForm(); + } return (
@@ -81,9 +103,62 @@ const Home = () =>{ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

-
alibaba
+ +
+ + + + + + + + + + + +