fix for production build

src/components/shared/InputCompOne.tsx

@@ -1,93 +1,95 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
-interface InputCompOneProps {
+export interface InputCompOneProps {
   label: string;
   labelClass: string;
+  labelSpan?: string;
+  labelSpanClass?: string;
   placeholder?: string;
   value: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
+  onInput: (e: React.FormEvent<HTMLInputElement>) => void;
   name: string;
   tabIndex?: number;
   ref?: React.RefObject<HTMLInputElement>;
   selectValue?: string;
-  labelSpan?: string;
-  labelSpanClass?: string;
-  parentInputClass?: string;
-  inputClass?: string;
-  parentSelectClass?: string;
-  selectClass?: string;
   input?: boolean;
   select?: boolean;
-  inputType?: string;
   selectOptions?: { value: string; label: string }[];
-  icon?: string | React.ReactNode; // Type for the icon
+  inputType?: string;
+  inputClass?: string;
+  parentInputClass?: string;
+  selectClass?: string;
+  parentSelectClass?: string;
 }
 
-const InputCompOne: React.FC<InputCompOneProps> = ({
-  label,
-  labelClass,
-  labelSpan,
-  labelSpanClass,
-  placeholder = "Placeholder",
-  value,
-  onChange,
-  onInput,
-  name,
-  tabIndex,
-  ref,
-  selectValue,
-  input,
-  select,
-  inputType = "text",
-  selectOptions,
-  icon,
-  selectClass,
-  inputClass,
-  parentInputClass,
-  parentSelectClass,
-}) => {
-  return (
-    <div className={parentInputClass}>
-      {label && (
-        <label htmlFor={name} className={`flex items-center ${labelClass}`}>
-          {label}
-          {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
-        </label>
-      )}
-      {input && (
-        <div className="flex items-center">
-          <input
-            type={inputType}
-            placeholder={placeholder}
-            value={value}
-            onChange={onChange}
-            onInput={onInput}
-            name={name}
-            tabIndex={tabIndex}
-            ref={ref}
-            className={inputClass}
-          />
-          {icon && (
-            <div className="">
-              {typeof icon === "string" ? <img src={icon} alt="icon" /> : icon}
-            </div>
-          )}
-        </div>
-      )}
-      {select && (
-        <div className={parentSelectClass}>
-          <select name={name} id="" value={selectValue} className={selectClass}>
-            {selectOptions?.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-        </div>
-      )}
-    </div>
-  );
-};
+const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
+  (
+    {
+      label,
+      labelClass,
+      labelSpan,
+      labelSpanClass,
+      placeholder,
+      value,
+      onChange,
+      onInput,
+      name,
+      tabIndex,
+      selectValue,
+      input = true,
+      select = false,
+      selectOptions = [],
+      inputType = "text",
+      inputClass,
+      parentInputClass,
+      selectClass,
+      parentSelectClass,
+    },
+    forwardedRef
+  ) => {
+    return (
+      <div>
+        {label && (
+          <label htmlFor="" className={labelClass}>
+            {label}
+            {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
+          </label>
+        )}
+        {input && (
+          <div className={parentInputClass}>
+            <input
+              type={inputType}
+              placeholder={placeholder}
+              value={value}
+              onChange={onChange}
+              onInput={onInput}
+              name={name}
+              tabIndex={tabIndex}
+              ref={forwardedRef}
+              className={inputClass}
+            />
+          </div>
+        )}
+        {select && (
+          <div className={parentSelectClass}>
+            <select
+              name={name}
+              id=""
+              value={selectValue}
+              className={selectClass}
+            >
+              {selectOptions.map(({ value, label }) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
 
 export default InputCompOne;