From 8fc0653aad4f4d70fe6d80403f15f10a45427d24 Mon Sep 17 00:00:00 2001 From: guibrbs <200037994@aluno.unb.br> Date: Thu, 2 Jun 2022 17:33:54 -0300 Subject: [PATCH] :rocket: Adding onClick functionality to form section --- components/Form/index.jsx | 12 +++++++++--- components/MainContent/index.jsx | 11 +++++++++-- pages/index.tsx | 6 ++++-- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/components/Form/index.jsx b/components/Form/index.jsx index 880106c..5275356 100644 --- a/components/Form/index.jsx +++ b/components/Form/index.jsx @@ -2,11 +2,17 @@ import { ChatTeardropDots, CheckCircle } from 'phosphor-react' import { MdDriveFileRenameOutline, MdMail } from 'react-icons/md' import emailjs from '@emailjs/browser' import { AnimatePresence, motion } from 'framer-motion' -import { useState } from 'react' +import { useEffect, useRef, useState } from 'react' -export function Form() { +export function Form( { isToForm } ) { const [isEmailSent, setIsEmailSent] = useState(false) + const myRef = useRef(null) + useEffect(() => { + if(isToForm){ + myRef.current?.scrollIntoView({ behavior: 'smooth' }) + } + }, [isToForm]) const titleInputStyle = 'font-semibold text-base leading-4 text-dark-500 mb-1 after:content-["*"] after:ml-0.5 after:text-red-500 dark:text-textLight-500 max-sm:text-[8px] max-sm:mb-0' const inputStyle = @@ -37,7 +43,7 @@ export function Form() {
+ ref={myRef}>

Envie sua mensagem

diff --git a/components/MainContent/index.jsx b/components/MainContent/index.jsx index 307cfb9..8edec1b 100644 --- a/components/MainContent/index.jsx +++ b/components/MainContent/index.jsx @@ -3,7 +3,13 @@ import { BsGithub } from "react-icons/bs"; import { BsLinkedin } from "react-icons/bs"; import Link from 'next/link'; -export function MainContent(){ +export function MainContent( { setIsToForm } ){ + const handleForm = () => { + setIsToForm(true) + setTimeout(() => { + setIsToForm(false) + }, 2000) + } return(
diff --git a/pages/index.tsx b/pages/index.tsx index 04591da..feaeb8a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -5,17 +5,19 @@ import { CuriositySection } from '../components/CuriositySection' import { Form } from '../components/Form' import Layout from '../components/Layout' import Head from 'next/head' +import { useState } from 'react' const Home: NextPage = () => { + const [isToForm, setIsToForm] = useState(false) return ( Home | Guilherme Ferreira - + -
+ ) }