text: import React, { useState } from 'react';
  import authSvg from '../assets/forget.svg';
  import { ToastContainer, toast } from 'react-toastify';
  import axios from 'axios';
  import { NavLink } from 'react-router-dom';
  
  const ForgetPassword = ({history}) => {
    const [formData, setFormData] = useState({
      email: '',
      textChange: 'Submit'
    });
    const { email, textChange } = formData;
    const handleChange = text => e => {
      setFormData({ ...formData, [text]: e.target.value });
    };
    const handleSubmit = e => {
      e.preventDefault();
      if (email) {
        setFormData({ ...formData, textChange: 'Submitting' });
        axios
          .put(`${process.env.REACT_APP_API_URL}/forgotpassword`, {
            email
          })
          .then(res => {
            
              setFormData({
                ...formData,
                email: '',
              });
              toast.success(`Please check your email`);
            
          })
          .catch(err => {
          console.log(err.response)
            toast.error(err.response.data.error);
          });
      } else {
        toast.error('Please fill all fields');
      }
    };
    return (
      <div className='min-h-screen bg-gray-100 text-gray-900'>
        <ToastContainer />
        <div className='max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1'>
          <div className='lg:w-1/2 xl:w-5/12 p-6 sm:p-12'>
          <div className="mt-8 ">
              <NavLink to="/">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                width="4rem" 
                height="4rem"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M7 16l-4-4m0 0l4-4m-4 4h18"
                />
              </svg>
  
              </NavLink>
             
            </div>
            <div className='mt-12 flex flex-col items-center'>
              <h1 className='text-2xl xl:text-3xl font-extrabold'>
                Forget Password
              </h1>
              <div className='w-full flex-1 mt-8 text-indigo-500'>
                
                <form
                  className='mx-auto max-w-xs relative '
                  onSubmit={handleSubmit}
                >
                  <input
                    className='w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white'
                    type='email'
                    placeholder='Email'
                    onChange={handleChange('email')}
                    value={email}
                  />
                  <button
                    type='submit'
                    className='mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none'
                  >
                    <i className='fas fa-sign-in-alt  w-6  -ml-2' />
                    <span className='ml-3'>Submit</span>
                  </button>
                </form>
              </div>
            </div>
          </div>
          <div className='flex-1 bg-indigo-100 text-center hidden lg:flex'>
            <div
              className='m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat'
              style={{ backgroundImage: `url(${authSvg})` }}
            ></div>
          </div>
        </div>
        ;
      </div>
    );
  };
  
  export default ForgetPassword;
  