Rafi Arrafif
eca25d29cd
Adding the react-hook-form library for better form handling than React's built-in state management, which often renders every time input is entered.
78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { Button, Form, Input } from "@heroui/react";
|
|
import { SubmitHandler, useForm } from "react-hook-form";
|
|
|
|
type Props = {
|
|
fullname: string;
|
|
};
|
|
|
|
type Inputs = {
|
|
fullname: string;
|
|
email: string;
|
|
password: string;
|
|
confirmPassword: string;
|
|
};
|
|
|
|
const ProvisionInput = ({ fullname }: Props) => {
|
|
const { register, handleSubmit, setValue } = useForm<Inputs>();
|
|
setValue("fullname", fullname);
|
|
|
|
const [submitStatus, setSubmitStatus] = useState(false);
|
|
const onSubmit: SubmitHandler<Inputs> = (data) => {
|
|
setSubmitStatus(true);
|
|
console.log(data);
|
|
};
|
|
|
|
return (
|
|
<div className="mt-6 px-3">
|
|
<Form className="flex flex-col gap-1.5" onSubmit={handleSubmit(onSubmit)}>
|
|
<Input
|
|
{...register("email")}
|
|
className="w-full "
|
|
label="Email"
|
|
type="email"
|
|
variant="bordered"
|
|
classNames={{
|
|
input: "text-md font-light pt-4",
|
|
inputWrapper: "flex gap-10",
|
|
}}
|
|
/>
|
|
<Input
|
|
{...register("password")}
|
|
className="w-full "
|
|
label="Password"
|
|
type="password"
|
|
variant="bordered"
|
|
classNames={{
|
|
input: "text-md font-light pt-4",
|
|
inputWrapper: "flex gap-10",
|
|
}}
|
|
/>
|
|
<Input
|
|
{...register("confirmPassword")}
|
|
className="w-full "
|
|
label="Confirm Password"
|
|
type="password"
|
|
variant="bordered"
|
|
classNames={{
|
|
input: "text-md font-light pt-4",
|
|
inputWrapper: "flex gap-10",
|
|
}}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
className="mt-1.5 w-full"
|
|
color="primary"
|
|
isLoading={submitStatus}
|
|
>
|
|
Continue
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProvisionInput;
|