first commit

app/src/components/ui/inputs/InputWithDropDown.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import RenameInput from "./RenameInput";
+
+type InputWithDropDownProps = {
+  label: string;
+  value: string;
+  options?: string[]; // Array of dropdown options
+  activeOption?: string; // The currently active dropdown option
+  onClick?: () => void;
+  onChange: (newValue: string) => void;
+  editableLabel?: boolean;
+};
+
+const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
+  label,
+  value,
+  options,
+  activeOption,
+  onClick,
+  onChange,
+  editableLabel = false,
+}) => {
+  const separatedWords = label
+    .split(/(?=[A-Z])/)
+    .map((word) => word.trim())
+    .toString();
+
+  const [openDropdown, setOpenDropdown] = useState(false);
+
+  return (
+    <div className="value-field-container">
+      {editableLabel ? (
+        <RenameInput value={label} />
+      ) : (
+        <label htmlFor={separatedWords} className="label">
+          {label}
+        </label>
+      )}
+      <div className="input default" id={separatedWords}>
+        <input
+          type="text"
+          defaultValue={value}
+          onChange={(e) => {
+            onChange(e.target.value);
+          }}
+        />
+
+        {activeOption && (
+          <div
+            className="dropdown"
+            onClick={() => {
+              setOpenDropdown(true);
+            }}
+          >
+            <div className="active-option">{activeOption}</div>
+            {options && openDropdown && (
+              <div className="dropdown-options-list">
+                {options.map((option, index) => (
+                  <div
+                    key={index}
+                    className={"dropdown-option"}
+                    onClick={onClick}
+                  >
+                    {option}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default InputWithDropDown;