function MainComponent() { const [trackerTime, setTrackerTime] = React.useState({ hours: 0, minutes: 0, seconds: 0 }); const [goal, setGoal] = React.useState(""); const [points, setPoints] = React.useState(0); const [earnedBadges, setEarnedBadges] = React.useState([]); const [customPrize, setCustomPrize] = React.useState(""); const [familyAndFriends, setFamilyAndFriends] = React.useState([]); const [isTracking, setIsTracking] = React.useState(false); const timeInSeconds = trackerTime.hours * 3600 + trackerTime.minutes * 60 + trackerTime.seconds; const goalInSeconds = { '1hour': 3600, '2hours': 3600 * 2, '3hours': 3600 * 3 }; const goalOptions = [ { value: '1hour', label: '1 hour screen time per day' }, { value: '2hours', label: '2 hours screen time per day' }, { value: '3hours', label: '3 hours screen time per day' } ]; React.useEffect(()=>{ let interval; if (isTracking) { interval = setInterval(()=>{ setTrackerTime((prevTime)=>{ if (prevTime.seconds === 59) { if (prevTime.minutes === 59) { if (goal !== '' && goalInSeconds[goal] <= (prevTime.hours + 1) * 3600) { setIsTracking(false); setPoints(points + 10); setEarnedBadges([ ...earnedBadges, '🏆' ]); } return { ...prevTime, hours: prevTime.hours + 1, minutes: 0, seconds: 0 }; } return { ...prevTime, minutes: prevTime.minutes + 1, seconds: 0 }; } return { ...prevTime, seconds: prevTime.seconds + 1 }; }); }, 1000); } return ()=>clearInterval(interval); }, [ isTracking, trackerTime, goal, goalInSeconds, points, earnedBadges ]); const trackerDisplay = `${trackerTime.hours.toString().padStart(2, '0')}:${trackerTime.minutes.toString().padStart(2, '0')}:${trackerTime.seconds.toString().padStart(2, '0')}`; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-6 mb-6 w-full lg:max-w-4xl", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#121212] font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Screen Time Tracker"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { id: "goal", name: "goal", className: "border rounded-md p-2 w-full text-sm", onChange: (e)=>setGoal(e.target.value), __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Select daily goal"), goalOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, option.label)))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "customPrize", value: customPrize, onChange: (e)=>setCustomPrize(e.target.value), className: "border rounded-md p-2 w-full text-sm mb-2", placeholder: "Type your prize", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, trackerDisplay), goal && timeInSeconds >= goalInSeconds[goal] && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Warning: Time to turn your phone off!"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#ffcc00] py-2 px-4 rounded-md text-white font-roboto mb-4", onClick: ()=>setIsTracking(!isTracking), __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, isTracking ? 'Stop Tracker' : 'Start Tracker'), /*#__PURE__*/ React.createElement("p", { className: "text-green-500 mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "Points: ", points), /*#__PURE__*/ React.createElement("p", { className: "text-blue-500 mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "Earned Badges: ", earnedBadges.join(' ')), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "familyOrFriendName", onChange: (e)=>setFamilyAndFriends([ ...familyAndFriends, e.target.value ]), className: "border rounded-md p-2 w-full text-sm mb-4", placeholder: "Add family member or friend", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 py-2 px-4 rounded-md text-white font-roboto", onClick: ()=>{}, __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "Add")), /*#__PURE__*/ React.createElement("div", { className: "text-left font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, "Family & Friends:", /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, familyAndFriends.map((member, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, member)))))); }