Refactor IOInputField and IOView components

src/frontend/src/components/IOInputField/index.tsx

@@ -3,7 +3,7 @@ import { Textarea } from "../ui/textarea";
 
 export default function IOInputField({
   inputType,
-  value,
+  field,
   updateValue,
 }: IOInputProps): JSX.Element | undefined {
   function handleInputType() {
@@ -13,7 +13,7 @@ export default function IOInputField({
           <Textarea
             className="custom-scroll"
             placeholder={"Enter text..."}
-            value={value}
+            value={field.value}
             onChange={updateValue}
           />
         );
@@ -25,7 +25,7 @@ export default function IOInputField({
           <Textarea
             className="custom-scroll"
             placeholder={"Enter text..."}
-            value={value}
+            value={field.value}
             onChange={updateValue}
           />
         );

src/frontend/src/components/IOview/index.tsx

@@ -67,7 +67,7 @@ export default function IOView(): JSX.Element {
                   <div className="file-component-tab-column">
                     {node && (
                       <IOInputField
-                        value={node.data.node!.template.value.value}
+                        field={node.data.node!.template["value"]}
                         inputType={input.type}
                         updateValue={(e) => {
                           e.target.value;

src/frontend/src/types/components/index.ts

@@ -648,6 +648,6 @@ export type dropdownButtonPropsType = {
 
 export type IOInputProps = {
   inputType: string;
-  value: string;
+  field: TemplateVariableType;
   updateValue: (e: any) => void;
 };