feat: add webui

web/src/components/inputs/MultiSelectField.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import {Field} from "react-final-form";
+import MultiSelect from "react-multi-select-component";
+import {classNames, COL_WIDTHS} from "../../styles/utils";
+
+interface Props {
+    label?: string;
+    options?: [] | any;
+    name: string;
+    className?: string;
+    columns?: COL_WIDTHS;
+}
+
+const MultiSelectField: React.FC<Props> = ({
+                                               name,
+                                               label,
+                                               options,
+                                               className,
+                                               columns
+                                           }) => (
+        <div
+            className={classNames(
+                columns ? `col-span-${columns}` : "col-span-12"
+            )}
+        >
+            <label
+                className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+                htmlFor={label}
+            >
+                {label}
+            </label>
+            <Field
+                name={name}
+                parse={val => val && val.map((item: any) => item.value)}
+                format={val =>
+                    val &&
+                    val.map((item: any) => options.find((o: any) => o.value === item))
+                }
+                render={({input, meta}) => (
+                    <MultiSelect
+                        {...input}
+                        options={options}
+                        labelledBy={name}
+                    />
+                )}
+            />
+        </div>
+ );
+
+export default MultiSelectField;