function MainComponent() { const [waterConsumed, setWaterConsumed] = React.useState(0); const [notified, setNotified] = React.useState(false); React.useEffect(()=>{ const notify = async ()=>{ const today = new Date(); const currentHour = today.getHours(); const isWeekend = today.getDay() === 0 || today.getDay() === 6; if (isWeekend && currentHour >= 11 && currentHour < 24 || !isWeekend && currentHour >= 7 && currentHour < 22) { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "assistant", "content": `Hi sweetie, it's time to drink 8.5 ounces of water! Stay hydrated to be healthy.` } ], system_prompt: 'Water consumption reminder', max_tokens: 200 }) }); const data = await response.json(); if (data.status) { setNotified(true); } } }; const intervalId = setInterval(notify, 1000 * 60 * 60 * 2); return ()=>clearInterval(intervalId); }, []); const addWaterOunce = ()=>{ if (waterConsumed < 64) { setWaterConsumed((prevWater)=>prevWater + 8.5); } }; const waterMessage = waterConsumed >= 64 ? "Yay! You've reached your daily water goal!" : `You've had ${waterConsumed.toFixed(1)} oz of water today. Keep sipping!`; const notificationImage = notified ? "/images/number-five-notification.jpg" : "/images/number-five-normal.jpg"; const addWaterButtonDisabled = waterConsumed >= 64; const waterTrackerCard = /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-4 bg-white rounded-lg shadow-lg mx-auto", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-4 text-4xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Water Tracker"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, waterMessage), /*#__PURE__*/ React.createElement("button", { name: "add_water_ounce", onClick: addWaterOunce, className: `px-6 py-3 mb-5 text-white font-roboto rounded ${addWaterButtonDisabled ? "bg-[#9CA3AF]" : "bg-[#60A5FA] hover:bg-[#2563EB]"}`, disabled: addWaterButtonDisabled, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Add 8.5 oz"), /*#__PURE__*/ React.createElement("img", { src: notificationImage, alt: "Number 5 from the Umbrella Academy reminding to drink water", className: "w-64 h-40 rounded mb-5", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }), notified && /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-[#F59E0B] border p-4 rounded-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Reminder: Time to drink more water!"))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#E0F2FE]", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, waterTrackerCard, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, ` @media only screen and (max-width: 640px) { .w-64 { width: 16rem; } } `)); }