feat(01-input-ux-01): add WeightInput, RepsInput wrappers + stepper CSS
- WeightInput: wraps StepperInput with step=2.5, suffix=kg - RepsInput: wraps StepperInput with step=1, no suffix - App.css: appended stepper styles (.stepper-wrapper, .stepper-btn, etc.) - Buttons min 44x44px touch targets, font-size 16px on input - No existing CSS removed; block appended at end
This commit is contained in:
@@ -0,0 +1,18 @@
|
||||
import StepperInput from './StepperInput';
|
||||
|
||||
function RepsInput({ value, onChange, disabled = false }) {
|
||||
return (
|
||||
<StepperInput
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
step={1}
|
||||
min={0}
|
||||
max={null}
|
||||
label="Reps"
|
||||
suffix=""
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default RepsInput;
|
||||
@@ -0,0 +1,18 @@
|
||||
import StepperInput from './StepperInput';
|
||||
|
||||
function WeightInput({ value, onChange, disabled = false }) {
|
||||
return (
|
||||
<StepperInput
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
step={2.5}
|
||||
min={0}
|
||||
max={null}
|
||||
label="Weight"
|
||||
suffix="kg"
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default WeightInput;
|
||||
Reference in New Issue
Block a user