feat(app-general): improve select input

packages/game-app/src/_shared/components/SelectInput/SelectInput.tsx

@@ -1,27 +1,34 @@
 import React from 'react';
-
-type Option = string | { value: string; label: string };
+import { SelectOption } from '@pipeline/models';
 
 type Props = {
   name: string;
   label: string;
   value: string;
-  options: Option[];
+  options: SelectOption[];
   onChange: React.ChangeEventHandler<HTMLSelectElement>;
+  disabled?: boolean;
   errorMessage?: string | null;
 };
 
-const SelectInput: React.FC<Props> = ({ value, name, label, onChange, options, errorMessage }) => {
+const SelectInput: React.FC<Props> = ({ value, name, label, onChange, options, errorMessage, disabled }) => {
   return (
     <div className="column">
       <label htmlFor={name}>{label}</label>
-      <select name={name} id={name} value={value} onChange={onChange}>
-        {options.map(o => {
-          const value = typeof o === 'string' ? o : o.value;
-          const label = typeof o === 'string' ? o : o.label;
-          return <option value={value}>{label}</option>;
-        })}
-      </select>
+      <div className="row">
+        <select disabled={disabled || options.length === 0} name={name} id={name} value={value} onChange={onChange}>
+          {options.map(o => {
+            const value = typeof o === 'string' ? o : o.value;
+            const label = typeof o === 'string' ? o : o.label;
+            return (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            );
+          })}
+        </select>
+        {options.length === 0 && !disabled && <div>Loading...</div>}
+      </div>
       {errorMessage ? <span className="error-message">{errorMessage}</span> : null}
     </div>
   );

packages/game-app/src/_shared/form/FormSelect/FormSelect.tsx

@@ -4,7 +4,7 @@ import { SelectInput } from '@pipeline/components';
 
 type Props = {} & Omit<React.ComponentProps<typeof SelectInput>, 'errorMessage' | 'onChange' | 'value'>;
 
-const FormSelect: React.FC<Props> = ({ name, label, options }) => {
+const FormSelect: React.FC<Props> = ({ name, label, options, disabled }) => {
   const data = useFormContext();
 
   const error = data.errors[name];
@@ -18,11 +18,12 @@ const FormSelect: React.FC<Props> = ({ name, label, options }) => {
           value={props.value}
           options={options}
           onChange={props.onChange}
+          disabled={disabled}
           errorMessage={error ? error.message : null}
         />
       );
     },
-    [error, label, options],
+    [error, label, options, disabled],
   );
 
   return (

packages/game-app/src/_shared/models/SelectOption.ts

@@ -0,0 +1 @@
+export type SelectOption = string | { value: string; label: string };

packages/game-app/src/_shared/models/index.ts

@@ -0,0 +1,3 @@
+import { SelectOption } from './SelectOption';
+
+export type { SelectOption };

packages/game-app/src/index.css

@@ -19,6 +19,11 @@ Temporary css waiting for the ui components
   flex-direction: column;
 }
 
+.row {
+  display: flex;
+  flex-direction: row;
+}
+
 .signup .content {
   max-width: 40%;
   margin: auto;