update App.js, src/components/FormInput/index.js and src/components/TestComponentNew/index.js

src/App.js

@@ -271,7 +271,7 @@ function App() {
         {/* <LeafletMap /> */}
 
         {/* <Digikala /> */}
-        {/* <TestComponentNew /> */}
+        <TestComponentNew />
       </div>
     </Provider>
   );

src/components/FormInput/index.js

@@ -6,13 +6,32 @@ import Input from "./Input";
 const FormInput = () => {
   const { register, getValues } = useForm();
   return (
-    <div className="mx-72 mt-20 rounded-sm shadow-sm">
+    <div className="mx-72 mt-20 flex flex-row items-center justify-between divide-x-4 divide-red-600 divide-dashed divide-x-reverse bg-white p-7 border border-gray-200 rounded-sm shadow-sm">
+      {/* right */}
+      <div className="bg-red-200">
         <Input
           register={register("firstName")}
           // defaultValue={info?.firstName}
           label="نام "
         />
       </div>
+      {/* middle */}
+      <div>
+        <Input
+          register={register("firstName")}
+          // defaultValue={info?.firstName}
+          label="نام "
+        />
+      </div>
+      {/* left */}
+      <div>
+        <Input
+          register={register("firstName")}
+          // defaultValue={info?.firstName}
+          label="نام "
+        />
+      </div>
+    </div>
   );
 };
 

src/components/TestComponentNew/index.js

@@ -1,7 +1,39 @@
 import React from "react";
 
+import { useForm } from "react-hook-form";
+
+import Input from "../FormInput/Input";
+
 const TestComponentNew = () => {
-  return <div>TestComponentNew</div>;
+  const { register, getValues } = useForm();
+
+  return (
+    <div>
+      <div className="flex mx-auto w-3/5 justify-between divide-x-2 divide-x-reverse bg-red-50">
+        <div className="flex-grow text-center font-bold bg-blue-400 px-5">
+          <Input
+            register={register("firstName")}
+            // defaultValue={info?.firstName}
+            label="نام "
+          />
+        </div>
+        <div className="flex-grow text-center font-bold bg-blue-400 px-5">
+          <Input
+            register={register("firstName")}
+            // defaultValue={info?.firstName}
+            label="نام "
+          />
+        </div>
+        <div className="flex-grow text-center font-bold bg-blue-400 px-5">
+          <Input
+            register={register("firstName")}
+            // defaultValue={info?.firstName}
+            label="نام "
+          />
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default TestComponentNew;