DuoInput.jsx

import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";

export default function DuoInput({label, onChange, values, layout = 'column'}) {

	const keys = Object.keys(values);
	const valuesArray = Object.values(values);
	const handleChange = (side, value) => {
		const changedSide = keys[side];
		const newValues = {...values, [changedSide]: value};

		if (onChange) {
			onChange(newValues);
		}
	};
	return (
		<div className='fi-field-wrapper'>
			<div className='fi-field-label-wrapper'>
				<span className='fi-field-label'>{label}</span>
			</div>
			<div className='fi-field-buttons-wrapper fi-duo-fields-wrapper' style={{flexDirection: layout}}>
				<div className='fi-duo-fields'>
					<NumberWithUnit
						className='fi-duo-field fi-duo-field-input'
						value={valuesArray[0]}
						onChange={(e) => {
							handleChange(0, e)
						}}
					/>
					<NumberWithUnit
						className='fi-duo-field fi-duo-field-input'
						value={valuesArray[1]}
						onChange={(e) => handleChange(1, e)}
					/>
				</div>
			</div>
		</div>
	);
}