Make DynamicForm more modular

src/components/Form/FormInput.tsx

@@ -0,0 +1,48 @@
+import type { LucideIcon } from "lucide-react";
+import type {
+  BaseFormBuilderProps,
+  GenericFormElementProps
+} from "./DynamicForm.js";
+import { Input } from "../UI/Input.js";
+import { Controller, FieldValues } from "react-hook-form";
+
+export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
+  type: "text" | "number" | "password";
+  properties?: {
+    prefix?: string;
+    suffix?: string;
+    action?: {
+      icon: LucideIcon;
+      onClick: () => void;
+    };
+  };
+}
+
+export function GenericInput<T extends FieldValues>({
+  control,
+  disabled,
+  field
+}: GenericFormElementProps<T, InputFieldProps<T>>) {
+  return (
+    <Controller
+      name={field.name}
+      control={control}
+      render={({ field: { value, onChange, ...rest } }) => (
+        <Input
+          type={field.type}
+          value={field.type === "number" ? parseInt(value) : value}
+          onChange={(e) =>
+            onChange(
+              field.type === "number"
+                ? parseInt(e.target.value)
+                : e.target.value
+            )
+          }
+          disabled={disabled}
+          {...field.properties}
+          {...rest}
+        />
+      )}
+    />
+  );
+}