From 74b7a17afc81aef685efcd8552531625c898ac3e Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 11 Apr 2023 20:29:04 -0300
Subject: [PATCH] added DropdownComponent

---
 .../NodeModal/components/ModalField/index.tsx | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index 3e33b56d8..a319c5031 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -9,7 +9,7 @@ import FloatComponent from "../../../../components/floatComponent";
 
 export default function ModalField({ data, title, required, id, name, type }) {
 	const { save } = useContext(TabsContext);
-    const [enabled, setEnabled] = useState(
+	const [enabled, setEnabled] = useState(
 		data.node.template[name]?.value ?? false
 	);
 
@@ -65,16 +65,24 @@ export default function ModalField({ data, title, required, id, name, type }) {
 						}}
 					/>
 				</div>
-			) : type ==="float"?(
-                <FloatComponent
-                disabled={false}
-                value={data.node.template[name].value ?? ""}
-                onChange={(t) => {
-                    data.node.template[name].value = t;
-                    save();
-                }}
-            />
-			):(<div>{name}</div>)}
+			) : type === "float" ? (
+				<FloatComponent
+					disabled={false}
+					value={data.node.template[name].value ?? ""}
+					onChange={(t) => {
+						data.node.template[name].value = t;
+						save();
+					}}
+				/>
+			) : type === "str" && data.node.template[name].options ? (
+				<Dropdown
+					options={data.node.template[name].options}
+					onSelect={(newValue) => (data.node.template[name].value = newValue)}
+					value={data.node.template[name].value ?? "Choose an option"}
+				></Dropdown>
+			) : (
+				<div>{name}</div>
+			)}
 		</div>
 	);
 }