refactor(forklifts): more refactoring to improve during production

frontend/src/lib/formStuff/components/TextArea.tsx

@@ -0,0 +1,28 @@
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "../../../components/ui/label";
+import { useFieldContext } from "..";
+import { FieldErrors } from "./FieldErrors";
+
+type InputFieldProps = {
+	label: string;
+	placeHolder: string;
+	required: boolean;
+};
+export const TextArea = ({ label, placeHolder, required }: InputFieldProps) => {
+	const field = useFieldContext<any>();
+
+	return (
+		<div className="grid gap-3 w-64">
+			<Label htmlFor={field.name}>{label}</Label>
+			<Textarea
+				id={field.name}
+				value={field.state.value}
+				onChange={(e) => field.handleChange(e.target.value)}
+				placeholder={placeHolder}
+				onBlur={field.handleBlur}
+				required={required}
+			/>
+			<FieldErrors meta={field.state.meta} />
+		</div>
+	);
+};

frontend/src/lib/formStuff/index.tsx

@@ -5,6 +5,7 @@ import { InputField } from "./components/InputField";
 import { InputPasswordField } from "./components/InputPasswordField";
 import { SelectField } from "./components/SelectField";
 import { SubmitButton } from "./components/SubmitButton";
+import { TextArea } from "./components/TextArea";
 
 export const { fieldContext, useFieldContext, formContext, useFormContext } =
 	createFormHookContexts();
@@ -16,6 +17,7 @@ export const { useAppForm } = createFormHook({
 		SelectField,
 		CheckboxField,
 		DateField,
+		TextArea,
 	},
 	formComponents: { SubmitButton },
 	fieldContext,