add correct form

src/autorouting/AutoRoutingRoot.tsx

@@ -1,11 +1,11 @@
 import React, { useState, ChangeEvent } from 'react';
-import { Input, SelectInput } from "../ui";
+import { Input, SelectInput, FormButton } from "../ui";
 
 const AutoRoutingRoot = () => {
     const [name, setName] = useState('');
     const [eventType, setEventType] = useState([]);
     const [isActivated, setIsActivated] = useState(false);
-    const [condition, setCondition] = useState('AND');
+    const [condition, setCondition] = useState([]);
     const [rule, setRule] = useState('value1');
     const [destination, setDestination] = useState('value1');
 
@@ -16,6 +16,11 @@ const AutoRoutingRoot = () => {
         { label: 'NewPatient', value: 'NewPatient' }
     ];
 
+    const conditionOptions = [
+        { label: 'And', value: 'And' },
+        { label: 'Or', value: 'Or' }
+    ];
+
     const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
         setName(event.target.value);
     };
@@ -28,8 +33,8 @@ const AutoRoutingRoot = () => {
         setIsActivated(!isActivated);
     };
 
-    const handleConditionChange = (event: ChangeEvent<HTMLSelectElement>) => {
-        setCondition(event.target.value);
+    const handleConditionChange = (selectedOptions: any) => {
+        setCondition(selectedOptions);
     };
 
     const handleRuleChange = (event: ChangeEvent<HTMLSelectElement>) => {
@@ -71,43 +76,40 @@ const AutoRoutingRoot = () => {
                 style={{ marginBottom: '16px' }}
             />
             <label htmlFor="conditionSelect" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Condition: </label>
-            <select
-                id="conditionSelect"
+            <SelectInput
+                isMulti
                 value={condition}
                 onChange={handleConditionChange}
-                style={{ padding: '8px', width: '100%', marginBottom: '16px', border: '1px solid #ccc', borderRadius: '4px' }}
-            >
-                <option value="AND">AND</option>
-                <option value="OR">OR</option>
-            </select>
+                options={conditionOptions}
+                placeholder="Select Label(s)"
+                aria-label="Labels"
+            />
             <label htmlFor="ruleSelect" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Rule: </label>
-            <select
-                id="ruleSelect"
-                value={rule}
-                onChange={handleRuleChange}
-                style={{ padding: '8px', width: '100%', marginBottom: '16px', border: '1px solid #ccc', borderRadius: '4px' }}
-            >
-                <option value="value1">value1</option>
-                <option value="value2">value2</option>
-                <option value="value3">value3</option>
-            </select>
+            <SelectInput
+                isMulti
+                value={eventType}
+                onChange={handleEventTypeChange}
+                options={eventTypeOptions}
+                placeholder="Select Label(s)"
+                aria-label="Labels"
+            />
             <label htmlFor="destinationSelect" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Destination: </label>
-            <select
-                id="destinationSelect"
-                value={destination}
-                onChange={handleDestinationChange}
-                style={{ padding: '8px', width: '100%', marginBottom: '16px', border: '1px solid #ccc', borderRadius: '4px' }}
-            >
-                <option value="value1">value1</option>
-                <option value="value2">value2</option>
-                <option value="value3">value3</option>
-            </select>
-            <button
+            <SelectInput
+                isMulti
+                value={eventType}
+                onChange={handleEventTypeChange}
+                options={eventTypeOptions}
+                placeholder="Select Label(s)"
+                aria-label="Labels"
+            />
+            {/* <button
                 onClick={handleAddClick}
                 style={{ padding: '10px 20px', backgroundColor: '#007BFF', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer', fontWeight: 'bold' }}
             >
                 Add
-            </button>
+            </button> */}
+            <br/>
+            <FormButton text='confirm'></FormButton>
             <p style={{ marginTop: '20px', color: '#333' }}>
                 Hello, {name || 'world'}! Selected event type: {eventType.map(option => option.label).join(', ')}. Activated: {isActivated ? 'Yes' : 'No'}. Condition: {condition}. Rule: {rule}. Destination: {destination}.
             </p>