function MainComponent({ shifts, onShiftChange }) { const handleShiftChange = (shiftIndex, field, value)=>{ const updatedShifts = [ ...shifts ]; updatedShifts[shiftIndex] = { ...updatedShifts[shiftIndex], [field]: value }; onShiftChange(updatedShifts); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, shifts.map((shift, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 m-2 border w-[300px] rounded-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Shift ", index + 1), /*#__PURE__*/ React.createElement("label", { htmlFor: `date-${index}`, className: "font-roboto text-[#121212] block", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Date:", /*#__PURE__*/ React.createElement("input", { type: "date", value: shift.date, className: "ml-2 p-1 rounded border", id: `date-${index}`, name: "date", onChange: (e)=>handleShiftChange(index, 'date', e.target.value), __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("label", { htmlFor: `start-${index}`, className: "font-roboto text-[#121212] block", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Start:", /*#__PURE__*/ React.createElement("input", { type: "time", value: shift.start, className: "ml-2 p-1 rounded border", id: `start-${index}`, name: "start", onChange: (e)=>handleShiftChange(index, 'start', e.target.value), __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("label", { htmlFor: `end-${index}`, className: "font-roboto text-[#121212] block", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "End:", /*#__PURE__*/ React.createElement("input", { type: "time", value: shift.end, className: "ml-2 p-1 rounded border", id: `end-${index}`, name: "end", onChange: (e)=>handleShiftChange(index, 'end', e.target.value), __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }))))); } function StoryComponent() { const [shifts, setShifts] = React.useState([ { date: "2023-04-01", start: "09:00", end: "17:00" }, { date: "2023-04-02", start: "12:00", end: "20:00" } ]); return /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { shifts: shifts, onShiftChange: setShifts, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this })); }

Shift 1

Shift 2