fix: linux display main page

src/pages/AddDspPage/AddDspPage.tsx

@@ -2,6 +2,8 @@ import { useState } from 'react';
 import { DSP, DSP_DEFAULT_PARAMETERS, DSPTypes } from '../../types';
 import Button from '../../components/Button/Button';
 import Card from '../../components/Card/Card';
+import ChoiceStepper from '../../components/ChoiceStepper/ChoiceStepper';
+import ChoiceSelect from '../../components/ChoiceSelect/ChoiceSelect';
 
 import './AddDspPage.css';
 
@@ -14,6 +16,8 @@ type DSPForm = {
   demo: boolean;
 };
 
+const DSP_TYPES = Object.keys(DSP_DEFAULT_PARAMETERS) as DSPTypes[];
+
 function AddDSPForm({
   onCancel,
   onAdd,
@@ -39,9 +43,7 @@ function AddDSPForm({
 
   function submit() {
     if (!canSubmit) return;
-    onAdd({
-      ...form,
-    });
+    onAdd({ ...form });
   }
 
   return (
@@ -64,38 +66,24 @@ function AddDSPForm({
       <div className="add-dsp-form__row">
         <div className="add-dsp-form__field">
           <label htmlFor="f-type">Model</label>
-          <select
+          <ChoiceSelect
             id="f-type"
             value={form.type}
-            onChange={(e) => {
-              const type = e.target.value as DSPTypes;
-
-              setForm({
-                ...form,
-                type,
-              });
-            }}
-          >
-            {Object.keys(DSP_DEFAULT_PARAMETERS).map((type) => (
-              <option key={type} value={type}>
-                {type}
-              </option>
-            ))}
-          </select>
+            options={DSP_TYPES}
+            onChange={(type) => setForm({ ...form, type })}
+          />
         </div>
 
         <div className="add-dsp-form__field">
           <label htmlFor="f-deviceid">Device ID</label>
-          <input
+          <ChoiceStepper
             id="f-deviceid"
-            className="mono"
-            type="number"
+            className="add-dsp-form__stepper"
+            value={form.deviceId}
             min={1}
             max={255}
-            step={1}
-            placeholder="1"
-            value={form.deviceId}
-            onChange={(e) => setForm({ ...form, deviceId: Number(e.target.value) })}
+            formatLabel={(v) => String(v)}
+            onChange={(deviceId) => setForm({ ...form, deviceId })}
           />
         </div>
       </div>
@@ -114,13 +102,15 @@ function AddDSPForm({
 
         <div className="add-dsp-form__field">
           <label htmlFor="f-port">Port</label>
-          <input
+          <ChoiceStepper
             id="f-port"
-            className="mono"
-            type="number"
+            className="add-dsp-form__stepper"
             value={form.port}
+            min={1}
+            max={65535}
             disabled={form.demo}
-            onChange={(e) => setForm({ ...form, port: Number(e.target.value) })}
+            formatLabel={(v) => String(v)}
+            onChange={(port) => setForm({ ...form, port })}
           />
         </div>
       </div>
@@ -141,7 +131,6 @@ function AddDSPForm({
         <Button variant="ghost" onClick={onCancel}>
           Cancel
         </Button>
-
         <Button variant="primary" onClick={submit} disabled={!canSubmit}>
           Add DSP
         </Button>