{"size": 2580, "ext": "js", "max_stars_repo_path": "src/component/login/Register.js", "max_stars_repo_name": "Ersin84/nextwromo-store", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/component/login/Register.js", "max_issues_repo_name": "Ersin84/nextwromo-store", "max_issues_repo_issues_event_min_datetime": "2022-01-29T00:00:03.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-01T10:48:01.000Z", "max_forks_repo_path": "src/component/login/Register.js", "max_forks_repo_name": "Ersin84/a-store", "max_forks_repo_forks_event_min_datetime": "2022-01-11T19:19:35.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-19T14:21:30.000Z"}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": 2, "avg_line_length": 29.6551724138, "max_line_length": 141, "alphanum_fraction": 0.5170542636}
import { FiLock, FiMail, FiUser } from 'react-icons/fi';

//internal import
import Error from '@component/form/Error';
import InputArea from '@component/form/InputArea';
import useLoginSubmit from '@hooks/useLoginSubmit';

const Register = ({ setShowResetPassword, setModalOpen }) => {
  const { handleSubmit, submitHandler, register, errors, loading } =
    useLoginSubmit(setModalOpen);

  return (
    <>
      <div className="text-center mb-6">
        <h2 className="text-3xl font-bold font-serif">Signing Up</h2>
        <p className="text-sm md:text-base text-gray-500 mt-2 mb-8 sm:mb-10">
          Create an account with email
        </p>
      </div>
      <form
        onSubmit={handleSubmit(submitHandler)}
        className="flex flex-col justify-center"
      >
        <div className="grid grid-cols-1 gap-5">
          <div className="form-group">
            <InputArea
              register={register}
              label="Name"
              name="name"
              type="text"
              placeholder="Full Name"
              Icon={FiUser}
            />

            <Error errorName={errors.name} />
          </div>

          <div className="form-group">
            <InputArea
              register={register}
              label="Email"
              name="email"
              type="email"
              placeholder="Email"
              Icon={FiMail}
            />
            <Error errorName={errors.email} />
          </div>
          <div className="form-group">
            <InputArea
              register={register}
              label="Password"
              name="password"
              type="password"
              placeholder="Password"
              Icon={FiLock}
            />

            <Error errorName={errors.password} />
          </div>

          <div className="flex items-center justify-between">
            <div className="flex ms-auto">
              <button
                type="button"
                onClick={() => setShowResetPassword(true)}
                className="text-end text-sm text-heading ps-3 underline hover:no-underline focus:outline-none"
              >
                Forgot password?
              </button>
            </div>
          </div>
          <button
            disabled={loading}
            type="submit"
            className="w-full text-center py-3 rounded bg-emerald-500 text-white hover:bg-emerald-600 transition-all focus:outline-none my-1"
          >
            Register
          </button>
        </div>
      </form>
    </>
  );
};

export default Register;
