32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import TimeInput from './TimeInput.js';
|
|
import NumericInput from './NumericInput.js';
|
|
|
|
const DoseSchedule = ({ doses, doseIncrement, onUpdateDoses }) => {
|
|
return (
|
|
<div className="bg-white p-5 rounded-lg shadow-sm border">
|
|
<h2 className="text-xl font-semibold mb-4 text-gray-700">Mein Plan</h2>
|
|
{doses.map((dose, index) => (
|
|
<div key={index} className="flex items-center space-x-3 mb-3">
|
|
<TimeInput
|
|
value={dose.time}
|
|
onChange={newTime => onUpdateDoses(doses.map((d, i) => i === index ? {...d, time: newTime} : d))}
|
|
/>
|
|
<div className="w-40">
|
|
<NumericInput
|
|
value={dose.dose}
|
|
onChange={newDose => onUpdateDoses(doses.map((d, i) => i === index ? {...d, dose: newDose} : d))}
|
|
increment={doseIncrement}
|
|
min={0}
|
|
unit="mg"
|
|
/>
|
|
</div>
|
|
<span className="text-gray-600 text-sm flex-1">{dose.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DoseSchedule;
|