function MainComponent() { const [entries, setEntries] = React.useState({}); const [selectedDate, setSelectedDate] = React.useState(''); const [summaryVisible, setSummaryVisible] = React.useState(false); const handleDateSelect = (dateString)=>{ setSelectedDate(dateString); setSummaryVisible(true); }; const getTotalSleepTime = (dateString)=>{ const dateEntries = entries[dateString]; return dateEntries ? dateEntries.reduce((total, currentEntry)=>{ const wakeTime = new Date(`1970-01-01T${currentEntry.wakeUpTime}`); const sleepTime = new Date(`1970-01-01T${currentEntry.sleepTime}`); const diff = wakeTime.getTime() - sleepTime.getTime(); return total + (diff > 0 ? diff : 0); }, 0) : 0; }; const handleSubmit = (event)=>{ event.preventDefault(); const data = new FormData(event.target); const date = data.get('date'); const sleepTime = data.get('sleepTime'); const wakeUpTime = data.get('wakeUpTime'); setEntries((prevEntries)=>({ ...prevEntries, [date]: [ ...prevEntries[date] || [], { sleepTime, wakeUpTime } ] })); }; const sleepIntensity = (dateString)=>{ const totalMinutes = getTotalSleepTime(dateString) / 60000; const intensitySteps = [ 'bg-[#ebf8ff]', 'bg-[#bee3f8]', 'bg-[#90cdf4]', 'bg-[#63b3ed]', 'bg-[#3182ce]' ]; const step = Math.min(Math.floor(totalMinutes / (12 * 60 / intensitySteps.length)), intensitySteps.length - 1); return intensitySteps[step]; }; const closeSummary = ()=>setSummaryVisible(false); const today = new Date(); const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0); const daysInMonth = endOfMonth.getDate() - startOfMonth.getDate() + 1; const days = Array.from({ length: daysInMonth }, (_, index)=>{ const day = new Date(today.getFullYear(), today.getMonth(), index + 1); return day.toISOString().split("T")[0]; }); const summaryModalContent = summaryVisible && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-full max-w-lg p-6 rounded-xl shadow-2xl m-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold font-roboto mb-5", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Sleep Summary for ", selectedDate), /*#__PURE__*/ React.createElement("ul", { className: "font-roboto text-[#121212] list-disc pl-5 space-y-2", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, entries[selectedDate]?.map((entry, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex flex-col md:flex-row justify-between", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Sleep Time: ", entry.sleepTime), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Wake-up Time: ", entry.wakeUpTime)))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Total Sleep Time: "), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, new Date(getTotalSleepTime(selectedDate)).toISOString().substr(11, 8))), /*#__PURE__*/ React.createElement("button", { onClick: closeSummary, className: "px-6 py-3 rounded-lg mt-4 bg-[#6d28d9] text-white", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Close"))); const monthName = today.toLocaleString('default', { month: 'long' }); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row p-6 bg-[#f0f4ff] text-[#333333] rounded-2xl shadow-lg gap-8 items-start", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-3 w-full lg:w-1/2", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Baby Sleep Tracker"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col space-y-3", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", id: "date", name: "date", className: "p-3 rounded-md border-2 border-gray-300", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "time", id: "sleepTime", name: "sleepTime", className: "p-3 rounded-md border-2 border-gray-300", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "time", id: "wakeUpTime", name: "wakeUpTime", className: "p-3 rounded-md border-2 border-gray-300", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "py-2 px-4 rounded-full bg-[#7f5af0] text-white", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Add Entry"))), /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-1/2", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, monthName), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-1", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, days.map((day)=>/*#__PURE__*/ React.createElement("button", { key: day, onClick: ()=>handleDateSelect(day), className: `w-10 h-10 rounded-full ${sleepIntensity(day)} flex items-center justify-center`, __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-semibold text-[#f7fafc]", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, new Date(day).getDate())))))), summaryModalContent, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, ` body { background: #a2d2ff; } `)); }

Baby Sleep Tracker

December