number input

web/components/number-input.tsx

@@ -0,0 +1,62 @@
+import clsx from 'clsx'
+import _ from 'lodash'
+
+import { Col } from './layout/col'
+import { Spacer } from './layout/spacer'
+
+export function NumberInput(props: {
+  numberString: string
+  onChange: (newNumberString: string) => void
+  error: string | undefined
+  label: string
+  disabled?: boolean
+  className?: string
+  inputClassName?: string
+  // Needed to focus the amount input
+  inputRef?: React.MutableRefObject<any>
+  children?: any
+}) {
+  const {
+    numberString,
+    onChange,
+    error,
+    label,
+    disabled,
+    className,
+    inputClassName,
+    inputRef,
+    children,
+  } = props
+
+  return (
+    <Col className={className}>
+      <label className="input-group">
+        <span className="bg-gray-200 text-sm">{label}</span>
+        <input
+          className={clsx(
+            'input input-bordered max-w-[200px] text-lg',
+            error && 'input-error',
+            inputClassName
+          )}
+          ref={inputRef}
+          type="number"
+          placeholder="0"
+          maxLength={6}
+          value={numberString}
+          disabled={disabled}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      </label>
+
+      <Spacer h={4} />
+
+      {error && (
+        <div className="mb-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
+          {error}
+        </div>
+      )}
+
+      {children}
+    </Col>
+  )
+}