➕ (dep-add) add library for better handling form

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.

features/auth/ui/cards/Provision.tsx

@@ -14,7 +14,7 @@ const Provision = ({ fullName }: Props) => {
       <p className="text-sm text-center font-light text-neutral-300 mt-2">
         Just a few more steps to join the fun!
       </p>
-      <ProvisionInput />
+      <ProvisionInput fullname={fullName} />
     </div>
   );
 };

features/auth/ui/components/ProvisionInput.tsx

@@ -1,53 +1,75 @@
 "use client";
 
-import { Button, Input } from "@heroui/react";
 import React, { useState } from "react";
+import { Button, Form, Input } from "@heroui/react";
+import { SubmitHandler, useForm } from "react-hook-form";
 
-const ProvisionInput = () => {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
+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">
-      <div className="flex flex-col gap-1.5">
+      <Form className="flex flex-col gap-1.5" onSubmit={handleSubmit(onSubmit)}>
         <Input
+          {...register("email")}
           className="w-full "
           label="Email"
           type="email"
           variant="bordered"
-          onChange={(e) => setEmail(e.target.value)}
           classNames={{
             input: "text-md font-light pt-4",
             inputWrapper: "flex gap-10",
           }}
         />
         <Input
+          {...register("password")}
           className="w-full "
           label="Password"
           type="password"
           variant="bordered"
-          onChange={(e) => setPassword(e.target.value)}
           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"
-          onChange={(e) => setConfirmPassword(e.target.value)}
           classNames={{
             input: "text-md font-light pt-4",
             inputWrapper: "flex gap-10",
           }}
         />
-      </div>
-      <Button className="mt-3 w-full" color="primary">
-        Continue
-      </Button>
+        <Button
+          type="submit"
+          className="mt-1.5 w-full"
+          color="primary"
+          isLoading={submitStatus}
+        >
+          Continue
+        </Button>
+      </Form>
     </div>
   );
 };