Start implementing workflow step form behaviour

src/components/ApprovalWorkflows/WorkflowStepSelects.tsx

@@ -0,0 +1,53 @@
+import Option from "@/interfaces/option";
+import Select from "../Low/Select";
+
+interface Props {
+    leftOptions: Option[];
+    rightOptions: Option[];
+    leftValue?: Option | null;
+    rightValue?: Option | null;
+    onLeftChange: (value: Option | null) => void;
+    onRightChange: (value: Option | null) => void;
+    leftPlaceholder?: string;
+    rightPlaceholder?: string;
+}
+
+export default function WorkflowStepSelects({
+    leftOptions,
+    rightOptions,
+    leftValue,
+    rightValue,
+    onLeftChange,
+    onRightChange,
+    leftPlaceholder = "Select",
+    rightPlaceholder = "Select",
+}: Props) {
+    return (
+        <div
+            className={"flex flex-row gap-0"}
+        >
+            {/* Left Select */}
+            <div className="flex-1 w-[175px]">
+                <Select
+                    options={leftOptions}
+                    value={leftValue}
+                    onChange={onLeftChange}
+                    placeholder={leftPlaceholder}
+                    flat
+                    className={"px-2 py-1 rounded-none rounded-l-2xl"}
+                />
+            </div>
+            {/* Right Select */}
+            <div className="flex-1 w-[175px]">
+                <Select
+                    options={rightOptions}
+                    value={rightValue}
+                    onChange={onRightChange}
+                    placeholder={rightPlaceholder}
+                    flat
+                    className="px-2 py-1 rounded-none rounded-r-2xl"
+                />
+            </div>
+        </div>
+    );
+}