🚀 Adding onClick functionality to form section

guibrbs · Jun 2, 2022 · 8fc0653 · 8fc0653 · vercel · Jun 2, 2022
1 parent 4b57d26
commit 8fc0653
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git 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() {
       <section
         className="mt-32 flex h-[576px] w-full max-w-customWidth flex-col items-center justify-center rounded-3xl border-[1px]
      border-stone-300 bg-light-100 dark:border-zinc-700 dark:bg-dark-100 max-sm:max-w-[320px] max-sm:h-[310px] max-sm:rounded-xl"
-      >
+      ref={myRef}>
         <h1 className="text-2xl font-semibold text-dark-500 dark:text-textLight-500 max-sm:text-sm">
           Envie sua mensagem
         </h1>

diff --git 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(
         <div className='flex w-full h-full justify-center mt-36 max-sm:mt-24'>
             <section className='w-full max-w-customWidth h-full max-h-max flex flex-1 justify-center space-x-12 relative after:absolute 
@@ -24,7 +30,8 @@ export function MainContent(){
                     </p>
                     <div className='flex mt-7 items-center space-x-3 max-sm:mt-4'>
                         <button className='w-52 h-12 dark:bg-textLight-500 bg-dark-500 dark:text-dark-500 text-textLight-500 
-                        font-bold text-xl rounded-lg hover:brightness-110 transition-all'>
+                        font-bold text-xl rounded-lg hover:brightness-110 transition-all'
+                        onClick={handleForm}>
                             Entre em contato
                         </button>
                         <Link href="https://github.com/guibrbs">

diff --git 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 (
     <Layout>
       <Head>
         <title>Home | Guilherme Ferreira</title>
       </Head>
-      <MainContent />
+      <MainContent setIsToForm={setIsToForm} />
       <CuriositySection />
       <Banner homepage={true}/>
-      <Form />
+      <Form isToForm={isToForm}/>
     </Layout>
   )
 }