feat(react/settings): port font size

apps/client/src/widgets/react/FormTextBox.tsx

@@ -1,27 +1,31 @@
 import type { InputHTMLAttributes, RefObject } from "preact/compat";
+import FormText from "./FormText";
 
-interface FormTextBoxProps extends Pick<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "autoComplete" | "className" | "type" | "name" | "pattern" | "title" | "style"> {
+interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
     id?: string;
     currentValue?: string;
     onChange?(newValue: string): void;
     inputRef?: RefObject<HTMLInputElement>;
 }
 
-export default function FormTextBox({ id, type, name, className, currentValue, onChange, autoComplete, inputRef, placeholder, title, pattern, style }: FormTextBoxProps) {
+export default function FormTextBox({ inputRef, className, type, currentValue, onChange, ...rest}: FormTextBoxProps) {
     return (
         <input
             ref={inputRef}
-            type={type ?? "text"}
             className={`form-control ${className ?? ""}`}
-            id={id}
-            name={name}
+            type={type ?? "text"}
             value={currentValue}
-            autoComplete={autoComplete}
-            placeholder={placeholder}
-            title={title}
-            pattern={pattern}
             onInput={e => onChange?.(e.currentTarget.value)}
-            style={style}
+            {...rest}
         />
     );
+}
+
+export function FormTextBoxWithUnit(props: FormTextBoxProps & { unit: string }) {
+    return (
+        <label class="input-group tn-number-unit-pair">
+            <FormTextBox {...props} />
+            <span class="input-group-text">{props.unit}</span>
+        </label>        
+    )
 }