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

src/App.js

@@ -213,7 +213,7 @@ function App() {
 
         {/* <GridListTable /> */}
 
-        <PopupCard />
+        {/* <PopupCard /> */}
 
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <CircleInCircle />
@@ -272,7 +272,7 @@ function App() {
         {/* <LeafletMap /> */}
 
         {/* <Digikala /> */}
-        {/* <TestComponentNew /> */}
+        <TestComponentNew />
       </div>
     </Provider>
   );

src/components/FormInput/Input.js

@@ -25,12 +25,12 @@ const FormFields = ({
       className={
         "h-full flex flex-row items-center rounded border mx-1 relative  " +
         borderClassname +
-        (value ? " bg-white border rounded" : " bg-transparent")
+        (value ? "bg-white border rounded" : "bg-transparent")
       }
     >
       <div
         className={
-          " text-xs absolute transition-all duration-300 pointer-events-none px-3  transform -translate-x-[7px] " +
+          "text-xs absolute transition-all duration-300 pointer-events-none px-3  transform -translate-x-[7px]" +
           (value
             ? `text-[#2483E1] bg-white top-[-10px]`
             : "text-[#0F0543] top-[10px]")

src/components/FormInput/index.js

@@ -11,6 +11,7 @@ const FormInput = () => {
   return (
     <div className="mx-72 mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3]  divide-x-reverse bg-white p-4 py-7 border border-gray-200 rounded-sm shadow-sm">
       <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
+        <Input register={register("firstName")} label="نام " type="text" />
         <Input
           register={register("firstName")}
           // defaultValue={info?.firstName}

src/components/TestComponentNew/fixNumbers.js

@@ -0,0 +1,22 @@
+const persianNumbers = [
+    /۰/g,
+    /۱/g,
+    /۲/g,
+    /۳/g,
+    /۴/g,
+    /۵/g,
+    /۶/g,
+    /۷/g,
+    /۸/g,
+    /۹/g,
+  ],
+  arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g],
+  fixNumbers = function (str) {
+    if (typeof str === "string") {
+      for (var i = 0; i < 10; i++) {
+        str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
+      }
+    }
+    return str;
+  };
+export default fixNumbers;

src/components/TestComponentNew/index.js

@@ -16,6 +16,11 @@ const TestComponentNew = () => {
             // defaultValue={info?.firstName}
             label="نام "
           />
+          <Input
+            register={register("lastName")}
+            // defaultValue={info?.lastName}
+            label="نام خانوادگی"
+          />
         </div>
         <div className="flex-grow text-center font-bold bg-blue-400 px-5">
           <Input
@@ -23,6 +28,11 @@ const TestComponentNew = () => {
             // defaultValue={info?.firstName}
             label="نام "
           />
+          <Input
+            register={register("lastName")}
+            // defaultValue={info?.lastName}
+            label="نام خانوادگی"
+          />
         </div>
         <div className="flex-grow text-center font-bold bg-blue-400 px-5">
           <Input
@@ -30,6 +40,11 @@ const TestComponentNew = () => {
             // defaultValue={info?.firstName}
             label="نام "
           />
+          <Input
+            register={register("lastName")}
+            // defaultValue={info?.lastName}
+            label="نام خانوادگی"
+          />
         </div>
       </div>
     </div>

src/components/TestComponentNew/input.js

@@ -0,0 +1,65 @@
+import fixNumbers from "./fixNumbers";
+import { useState } from "react";
+const Input = ({
+  defaultValue,
+  set,
+  label,
+  className,
+  type,
+  maxLength,
+  max,
+  min,
+  register,
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  return (
+    <div
+      className={
+        "h-full rounded border border-color7 mx-1 relative flex items-center flex-row-reverse bg-color2_5 " +
+        className +
+        (value ? " border-blue-500 bg-white border rounded" : " bg-transparent")
+      }
+    >
+      <div
+        className={
+          " text-sm absolute  transition-all duration-300 pointer-events-none px-3 PY-2 text-left  transform translate-x-[-10px] " +
+          (value
+            ? `text-blue-500 bg-white top-[-10px]`
+            : "text-color19 top-[20px]")
+        }
+      >
+        {label}
+      </div>
+      {type !== "textarea" ? (
+        <input
+          {...register}
+          maxLength={maxLength}
+          value={value}
+          type={"text"}
+          className={"rtl w-full h-full  px-4 outline-0 "}
+          onChange={(e) => setValue(e.target.value)}
+          inputMode={type === "number" ? "numeric" : ""}
+          onInput={(e) => {
+            let value = e.target.value;
+            if (type === "number")
+              value = fixNumbers(value).replace(/[^\d.-]/g, "");
+            if (maxLength && value.length > maxLength)
+              value = value.slice(0, maxLength);
+            if (!isNaN(max) && +e.target.value > max) value = max;
+            if (!isNaN(min) && +e.target.value < min) value = min;
+            e.target.value = value;
+          }}
+        />
+      ) : (
+        <textarea
+          {...register}
+          className={"rtl w-full h-full  p-4 outline-0 resize-none"}
+          onChange={(e) => setValue(e.target.value)}
+        >
+          {value}
+        </textarea>
+      )}
+    </div>
+  );
+};
+export default Input;