function MainComponent() { const [taskName, setTaskName] = React.useState(''); const [taskTime, setTaskTime] = React.useState(''); const [alerts, setAlerts] = React.useState([]); React.useEffect(()=>{ const interval = setInterval(()=>{ alerts.forEach((alert1)=>{ const now = new Date(); const alertTime = new Date(); alertTime.setHours(alert1.time.split(":")[0], alert1.time.split(":")[1]); if (alertTime <= now) { alertNotification(alert1.name); setAlerts((currentAlerts)=>currentAlerts.filter((item)=>item !== alert1)); } }); }, 60000); return ()=>clearInterval(interval); }, [ alerts ]); const handleSubmit = (e)=>{ e.preventDefault(); setAlerts([ ...alerts, { name: taskName, time: taskTime } ]); setTaskName(''); setTaskTime(''); }; const alertNotification = (taskName)=>{ if (!("Notification" in window)) { alert("This browser does not support desktop notification"); } else if (Notification.permission === "granted") { new Notification(`🔔 Time for: ${taskName}!`); } else if (Notification.permission !== "denied") { Notification.requestPermission().then((permission)=>{ if (permission === "granted") { new Notification(`🔔 Time for: ${taskName}!`); } }); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-[#F0F2F5] flex-wrap", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 m-4 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "🔔 Schedule Alert Tool"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "taskName", className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Task Name:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "taskName", value: taskName, onChange: (e)=>setTaskName(e.target.value), className: "w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#007BFF]", placeholder: "e.g., Stand-up Meeting", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "taskTime", className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Task Time:"), /*#__PURE__*/ React.createElement("input", { type: "time", name: "taskTime", value: taskTime, onChange: (e)=>setTaskTime(e.target.value), className: "w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#007BFF]", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 mt-4 bg-[#007BFF] text-white rounded-lg hover:bg-[#0056b3] transition duration-200 ease-in-out", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Set Alert"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 m-4 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Scheduled Alerts"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, alerts.map((alert1, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "border p-3 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, alert1.name, " - ", alert1.time)))))); }