function MainComponent() { const [transitTimes, setTransitTimes] = React.useState({ 'Toledo': 120, 'Location 2': 0, 'Location 3': 0, 'Location 4': 0, 'Location 5': 0, 'Location 6': 0, 'Location 7': 0 }); const handleTransitTimeChange = (location, time)=>{ setTransitTimes((prev)=>({ ...prev, [location]: Number(time) })); }; const [alarms, setAlarms] = React.useState([]); const addAlarm = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const shiftLocation = formData.get('shiftLocation'); const shiftStartTime = formData.get('shiftStartTime'); const transitTime = transitTimes[shiftLocation] || 0; const alarmTime = new Date(shiftStartTime); alarmTime.setMinutes(alarmTime.getMinutes() - transitTime); setAlarms((prev)=>[ ...prev, { shiftLocation, shiftStartTime, alarmTime } ]); event.target.reset(); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full text-center py-4 bg-[#ffffff] shadow", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Nurse Shift Alarm App")), /*#__PURE__*/ React.createElement("main", { className: "max-w-4xl mx-auto mt-8", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Set Transit Times"), Object.keys(transitTimes).map((location, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: `location-${index}`, value: location, className: "w-full p-2 my-2 border border-[#dddddd] rounded font-roboto", readOnly: true, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: `transitTime-${index}`, value: transitTimes[location], onChange: (e)=>handleTransitTimeChange(location, e.target.value), className: "w-24 p-2 my-2 border border-[#dddddd] rounded ml-2 font-roboto", placeholder: "Time", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "minutes")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Add New Shift"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", onSubmit: addAlarm, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "shiftLocation", className: "w-full p-2 border border-[#dddddd] rounded font-roboto", placeholder: "Shift Location", required: true, __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", name: "shiftStartTime", className: "w-full p-2 border border-[#dddddd] rounded font-roboto", required: true, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full py-3 bg-[#4caf50] text-white font-bold rounded font-roboto", type: "submit", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Set Alarm")))), /*#__PURE__*/ React.createElement("footer", { className: "w-full text-center py-4 bg-[#ffffff] shadow mt-8", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#121212]", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "Connect to Calendar"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-2", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mr-4 bg-[#db4437] text-white py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-google", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }), " Google Calendar"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#007aff] text-white py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-mobile-alt", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }), " Phone Calendar"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4267B2] text-white py-2 px-4 rounded font-roboto ml-4", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-facebook", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }), " Facebook Calendar"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 rounded font-roboto ml-4", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-twitter", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }), " Twitter Calendar")))); }