Update src/TurboNode.tsx

src/TurboNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo, ReactNode } from 'react';
+import React, { memo, ReactNode, useState } from 'react';
 import { Handle, NodeProps, Position } from 'reactflow';
 import { FiCloud } from 'react-icons/fi';
 
@@ -6,9 +6,28 @@ export type TurboNodeData = {
   title: string;
   icon?: ReactNode;
   subline?: string;
+  inputFields: { id: string; label: string; value: string }[];
+  options: { id: string; label: string; checked: boolean }[];
 };
 
 export default memo(({ data }: NodeProps<TurboNodeData>) => {
+  const [formData, setFormData] = useState(data.inputFields);
+  const [selectedOptions, setSelectedOptions] = useState(data.options);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setFormData((prevFormData) =>
+      prevFormData.map((field) => (field.id === name ? { ...field, value } : field))
+    );
+  };
+
+  const handleOptionChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const { name, value } = event.target;
+    setSelectedOptions((prevOptions) =>
+      prevOptions.map((option) => (option.id === name ? { ...option, checked: option.label === value } : option))
+    );
+  };
+
   return (
     <>
       <div className="cloud gradient">
@@ -23,6 +42,27 @@ export default memo(({ data }: NodeProps<TurboNodeData>) => {
             <div>
               <div className="title">{data.title}</div>
               {data.subline && <div className="subline">{data.subline}</div>}
+              {formData.map((field) => (
+                <div key={field.id}>
+                  <label htmlFor={field.id}>{field.label}</label>
+                  <input
+                    type="text"
+                    id={field.id}
+                    name={field.id}
+                    value={field.value}
+                    onChange={handleInputChange}
+                  />
+                </div>
+              ))}
+              {selectedOptions.map((option) => (
+                <div key={option.id}>
+                  <label htmlFor={option.id}>{option.label}</label>
+                  <select id={option.id} name={option.id} value={option.checked ? option.label : ''} onChange={handleOptionChange}>
+                    <option value="">Select an option</option>
+                    <option value={option.label}>{option.label}</option>
+                  </select>
+                </div>
+              ))}
             </div>
           </div>
           <Handle type="target" position={Position.Left} />
@@ -31,4 +71,4 @@ export default memo(({ data }: NodeProps<TurboNodeData>) => {
       </div>
     </>
   );
-});
+});