forked from M3-Academy/desafio-react-e-typescript
feat(institucional):formulário de contato estruturado
html e css aplicado e formik funcional, os campos resetam ao serem enviados
This commit is contained in:
parent
19a0501951
commit
a001e46a99
@ -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;
|
||||
|
||||
22
desafio-5/src/components/scripts/moleculas/InputForm.tsx
Normal file
22
desafio-5/src/components/scripts/moleculas/InputForm.tsx
Normal file
@ -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<titleName> = ({ type,Labeltrack,className,Inputclass,id,Label,placeholder, required = false}) => {
|
||||
return(
|
||||
<div className={className}>
|
||||
<label htmlFor={Labeltrack}>{Label}</label>
|
||||
<Field className={Inputclass} id={id} name={Labeltrack} type={type} placeholder={placeholder} required={required}/>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
@ -15,4 +15,9 @@ export const BreadcrumbTitle: React.FC<titleName> = ({ nameTitle,className }) =
|
||||
return (
|
||||
<h5 className={className}>{nameTitle}</h5>
|
||||
)
|
||||
}
|
||||
export const FormTitle: React.FC<titleName> = ({ nameTitle,className }) => {
|
||||
return (
|
||||
<h2 className={className}>{nameTitle}</h2>
|
||||
)
|
||||
}
|
||||
@ -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);
|
||||
@ -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<FormTypes>) =>{
|
||||
console.log(values)
|
||||
formik.resetForm();
|
||||
}
|
||||
return (
|
||||
<div className={MainStyles["main_wrapper"]}>
|
||||
<div className={MainStyles["main_wrapper_breadcrumb"]}>
|
||||
@ -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?
|
||||
</p>
|
||||
</section>
|
||||
<div id={MainStyles["Contato"]}
|
||||
className={activeSection === "Contato" ? MainStyles["active"] : MainStyles["hiden"]}
|
||||
>alibaba</div>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
id={MainStyles["Contato"]}
|
||||
onSubmit={handleFormikSubmit}
|
||||
>
|
||||
<Form
|
||||
id={MainStyles["contact"]}
|
||||
className={activeSection === "Contato" ? MainStyles["active"] : MainStyles["hiden"]}
|
||||
>
|
||||
<FormTitle className={MainStyles["contactTitlte"]} nameTitle="Preencha o formulário "/>
|
||||
<Inputform className={MainStyles.form_col}
|
||||
id={MainStyles.Name}
|
||||
type="text" Labeltrack="name"
|
||||
Label="NAME"
|
||||
placeholder="Seu nome completo"
|
||||
/>
|
||||
<Inputform className={MainStyles.form_col}
|
||||
id={MainStyles.Email}
|
||||
Label="E-MAIL" Labeltrack="email"
|
||||
type="email"
|
||||
placeholder="Seu e-mail"
|
||||
/>
|
||||
<Inputform className={MainStyles.form_col}
|
||||
id={MainStyles.Cpf}
|
||||
Label="CPF" Labeltrack="cpf"
|
||||
type="number"
|
||||
placeholder="000.000.000-00"
|
||||
/>
|
||||
<Inputform className={MainStyles.form_col}
|
||||
id={MainStyles.Date}
|
||||
Label="DATA DE NASCIMENTO" Labeltrack="date"
|
||||
type="number"
|
||||
placeholder="00.00.0000"
|
||||
/>
|
||||
<Inputform className={MainStyles.form_col}
|
||||
id={MainStyles.Phone}
|
||||
Label="TELEFONE" Labeltrack="phone"
|
||||
type="text"
|
||||
placeholder="(00) 00000-0000"
|
||||
/>
|
||||
<Inputform className={MainStyles.form_col}
|
||||
id={MainStyles.Insta}
|
||||
Label="INSTAGRAM" Labeltrack="instagram"
|
||||
type="text"
|
||||
placeholder="@seuuser"
|
||||
/>
|
||||
<Inputform className={MainStyles.form_check}
|
||||
id={MainStyles.box}
|
||||
Label="Declaro que li e aceitei os termos e condições" Labeltrack="aceito"
|
||||
type="checkbox"
|
||||
required= {true}
|
||||
/>
|
||||
<button type="submit">CADASTRE-SE</button>
|
||||
</Form>
|
||||
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user