Updated channel editor & fixes

src/components/generic/form/EnumSelect.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { InputWrapper } from './InputWrapper.jsx';
+import { Label } from './Label.jsx';
+
+type DefaultSelectProps = JSX.IntrinsicElements['select'];
+
+interface SelectProps extends DefaultSelectProps {
+  options?: {
+    name: string;
+    value: number | string;
+  }[];
+  optionsEnum?: { [s: string]: string | number };
+  label?: string;
+  error?: string;
+  small?: boolean;
+}
+
+export const EnumSelect = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ options, optionsEnum, label, error, small, ...props }, ref) => {
+    const optionsEnumValues = optionsEnum
+      ? Object.entries(optionsEnum).filter(
+          (value) => typeof value[1] === 'number',
+        )
+      : [];
+    return (
+      <div>
+        {label && <Label label={label} error={error} />}
+        <InputWrapper>
+          <select
+            ref={ref}
+            className={`w-full  bg-transparent focus:outline-none focus:border-primary ${
+              small ? 'py-1 mx-1' : 'h-10 mx-2'
+            }`}
+            {...props}
+          >
+            {optionsEnumValues.length &&
+              optionsEnumValues.map(([name, value]) => (
+                <option className="dark:bg-gray-700" key={value} value={value}>
+                  {name}
+                </option>
+              ))}
+            {options &&
+              options.map((option) => (
+                <option
+                  className="dark:bg-gray-700"
+                  key={option.value}
+                  value={option.value}
+                >
+                  {option.name}
+                </option>
+              ))}
+          </select>
+        </InputWrapper>
+      </div>
+    );
+  },
+);

src/components/generic/form/Input.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { InputWrapper } from './InputWrapper.jsx';
+import { Label } from './Label.jsx';
+
+type DefaultInputProps = JSX.IntrinsicElements['input'];
+
+interface InputProps extends DefaultInputProps {
+  label?: string;
+  error?: string;
+  action?: JSX.Element;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  function Input({ label, error, action, ...props }: InputProps, ref) {
+    return (
+      <div className="w-full">
+        {label && <Label label={label} error={error} />}
+        <InputWrapper error={error} disabled={props.disabled}>
+          <input
+            ref={ref}
+            className="w-full h-10 px-3 py-2 bg-transparent focus:outline-none focus:border-primary"
+            {...props}
+          />
+          {action && <div className="flex mr-1">{action}</div>}
+        </InputWrapper>
+      </div>
+    );
+  },
+);

src/components/generic/form/InputWrapper.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export interface LabelProps {
+  error?: string;
+  disabled?: boolean;
+  children: React.ReactNode;
+}
+
+export const InputWrapper = ({
+  error,
+  disabled,
+  children,
+}: LabelProps): JSX.Element => (
+  <div
+    className={`flex w-full border-y border rounded-md ${
+      disabled
+        ? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
+        : ''
+    } ${
+      error
+        ? 'border-red-500'
+        : disabled
+        ? 'border-gray-200'
+        : ' focus-within:border-primary hover:border-primary'
+    }`}
+  >
+    {children}
+  </div>
+);

src/components/generic/form/Label.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface LabelProps {
+  label: string;
+  error?: string;
+}
+
+export const Label = ({ label, error }: LabelProps): JSX.Element => (
+  <label className="text-xs font-semibold text-gray-500">
+    {label}
+    {error && <span className="ml-2 text-red-500">{error}</span>}
+  </label>
+);