import React from 'react';
import useForm from './useForm';
import validate from './validateInfo';
import './Form.css';

const FormSignup = ({submitForm}) => {
  const {handleChange, values, handleSubmit, errors} = useForm(submitForm, validate);

  return (
    <div className='form-content-right'>
        <form className='form' onSubmit={handleSubmit} noValidate>
            
            <h1>Get started with us today! Create your account by filling out the information below.</h1>
            <div className='form-inputs'>
            </div>
            <button className='form-input-btn' type='submit'>Sign Up</button>
            <span className='form-input-login'>
                Already have an account? Login <a href='#'>here</a>
            </span>
        </form>
    </div>
  );
};

export default FormSignup;

import React, {useState} from 'react';
import FormSignup from './FormSignup';
import FormSuccess from './FormSuccess';
import './Form.css';

const Form = () => {
  const[isSubmitted, setIsSubmitted] = useState(false);

  {!isSubmitted ? <FormSignup submitForm={submitForm} /> : <FormSuccess/>}

  function submitForm(){
    setIsSubmitted(true);
  }
  return (
    <>
      <div className = 'form-container'>
        <span className='close-btn'>x</span>
        <div className='form-content-left'>
          <img src='img/img-2.svg' alt='formimg' className='form-img'/>
        </div>
          {!isSubmitted ? (<FormSignup submitForm={submitForm} />) : (<FormSuccess/>)}
      </div>
    </>
  );
};

export default Form;