MateusLopes/desafio-react-e-typescript-mateus-lopes
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add modulo scss no componente formulario

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2023-01-17 21:42:44 -03:00
parent d2c104ff51
commit 7264458c4a
3 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/Large/Form/ContactForm.tsx
View File

@ -1,5 +1,6 @@
import { Formik, Form, Field, ErrorMessage } from "formik"
import { Formik, Form, Field, ErrorMessage } from 'formik'
import FormSchema from '../../../schema/FormSchema';
import styles from './contactForm.module.scss'
interface IFormikValues{
name: string;
@ -12,12 +13,12 @@ interface IFormikValues{
}
const initialValues = {
name: "",
email: "",
cpf: "",
birthDate: "",
phone: "",
instagram: "",
name: '',
email: '',
cpf: '',
birthDate: '',
phone: '',
instagram: '',
check: false
}
@ -26,15 +27,14 @@ const ContactForm = () => {
let successMessage:any = document.querySelector('.success-message')
let intervalo = window.setInterval(function () {
successMessage.innerText = "*Formulário enviado com sucesso!"
successMessage.innerText = '*Formulário enviado com sucesso!'
}, 800)
window.setTimeout(function () {
clearInterval(intervalo)
successMessage.innerText = ""
successMessage.innerText = ''
}, 30000)
console.log(values);
resetForm({values: ''})
}
@ -43,46 +43,46 @@ const ContactForm = () => {
initialValues={initialValues}
validationSchema={FormSchema}
>
<Form className='contact-form'>
<div className='form-input-box'>
<label htmlFor="name">Nome</label>
<ErrorMessage component='span' name="name" className='form-invalid-feedback'/>
<Field id="name" name="name" placeholder="Seu nome completo" className="form-input" />
<Form className={styles['contact-form']}>
<div className={styles['form-input-box']}>
<label htmlFor='name'>Nome</label>
<ErrorMessage component='span' name='name' className={styles['form-invalid-feedback']}/>
<Field id='name' name='name' placeholder='Seu nome completo' className={styles['form-input']} />
</div>
<div className='form-input-box'>
<label htmlFor="email">E-mail</label>
<ErrorMessage component='span' name="email" className='form-invalid-feedback'/>
<Field id="email" name="email" placeholder="Seu e-mail" className="form-input"/>
<div className={styles['form-input-box']}>
<label htmlFor='email'>E-mail</label>
<ErrorMessage component='span' name='email' className={styles['form-invalid-feedback']}/>
<Field id='email' name='email' placeholder='Seu e-mail' className={styles['form-input']}/>
</div>
<div className='form-input-box'>
<label htmlFor="cpf">CPF</label>
<ErrorMessage component='span' name="cpf" className='form-invalid-feedback'/>
<Field id="cpf" name="cpf" placeholder="000.000.000-00" className="form-input"/>
<div className={styles['form-input-box']}>
<label htmlFor='cpf'>CPF</label>
<ErrorMessage component='span' name='cpf' className={styles['form-invalid-feedback']}/>
<Field id='cpf' name='cpf' placeholder='000.000.000-00' className={styles['form-input']}/>
</div>
<div className='form-input-box'>
<label htmlFor="birthDate">Data de Nascimento:</label>
<ErrorMessage component='span' name="birthDate" className='form-invalid-feedback'/>
<Field id="birthDate" name="birthDate" placeholder="00.00.0000" className="form-input"/>
<div className={styles['form-input-box']}>
<label htmlFor='birthDate'>Data de Nascimento:</label>
<ErrorMessage component='span' name='birthDate' className={styles['form-invalid-feedback']}/>
<Field id='birthDate' name='birthDate' placeholder='00.00.0000' className={styles['form-input']}/>
</div>
<div className='form-input-box'>
<label htmlFor="phone">Telefone:</label>
<ErrorMessage component='span' name="phone" className='form-invalid-feedback'/>
<Field id="phone" name="phone" placeholder="(00) 00000-0000" className="form-input"/>
<div className={styles['form-input-box']}>
<label htmlFor='phone'>Telefone:</label>
<ErrorMessage component='span' name='phone' className={styles['form-invalid-feedback']}/>
<Field id='phone' name='phone' placeholder='(00) 00000-0000' className={styles['form-input']}/>
</div>
<div className='form-input-box'>
<label htmlFor="instagram">Instagram</label>
<Field id="instagram" name="instagram" placeholder="@seuuser-" className="form-input"/>
<div className={styles['form-input-box']}>
<label htmlFor='instagram'>Instagram</label>
<Field id='instagram' name='instagram' placeholder='@seuuser-' className={styles['form-input']}/>
</div>
<div className='check-input-box'>
<ErrorMessage component='span' name="check" className='form-invalid-feedback-check' />
<div className={styles['check-input-box']}>
<ErrorMessage component='span' name='check' className={styles['form-invalid-feedback-check' ]}/>
<span>*</span>
<label htmlFor="check">Declaro que li e aceito</label>
<Field type="checkbox" id="check" name="check" className="checkbox-custom"/>
<label htmlFor='check'>Declaro que li e aceito</label>
<Field type='checkbox' id='check' name='check' className={styles['checkbox-custom']}/>
</div>
<button type="submit" className='form-submit-btn'>Cadastre-se</button>
<div className='success-message'></div>
<button type='submit' className={styles['form-submit-btn']}>Cadastre-se</button>
<div className={styles['success-message']}></div>
</Form>
</Formik>
}

7
src/components/Large/Form/contactForm.scss → src/components/Large/Form/contactForm.module.scss
View File

@ -1,8 +1,15 @@
@import "../../../global.scss";
.contact-form {
display: flex;
flex-direction: column;
gap: 12px;
a {
display: block;
width: 100%;
}
.form-input-box {
display: flex;
flex-direction: column;

1
src/global.scss
View File

@ -52,4 +52,3 @@ button {
// Pages
@import "./pages/institucional.scss";
@import "./components/Large/Form/contactForm.scss";