function MainComponent() { const [repeat, setRepeat] = React.useState(""); const [day, setDay] = React.useState(""); const [monthDay, setMonthDay] = React.useState(""); const [time, setTime] = React.useState(""); const [task, setTask] = React.useState(""); const [initials, setInitials] = React.useState(""); const [showDayDropdown, setShowDayDropdown] = React.useState(false); const [showMonthDayInput, setShowMonthDayInput] = React.useState(false); const handleRepeatChange = (e)=>{ setRepeat(e.target.value); if (e.target.value === "weekly") { setShowDayDropdown(true); setShowMonthDayInput(false); } else if (e.target.value === "monthly") { setShowDayDropdown(false); setShowMonthDayInput(true); } else { setShowDayDropdown(false); setShowMonthDayInput(false); } }; const handleTaskSubmit = (e)=>{ e.preventDefault(); setInitials(initials); alert("Task completed by " + initials); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "OPI Task Reminder"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleTaskSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Task Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "task", value: task, onChange: (e)=>setTask(e.target.value), className: "border border-gray-300 p-2 w-full", required: true, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Repeat"), /*#__PURE__*/ React.createElement("select", { name: "repeat", value: repeat, onChange: handleRepeatChange, className: "border border-gray-300 p-2 w-full", required: true, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Select"), /*#__PURE__*/ React.createElement("option", { value: "daily", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Daily"), /*#__PURE__*/ React.createElement("option", { value: "weekly", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Weekly"), /*#__PURE__*/ React.createElement("option", { value: "monthly", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Monthly"))), showDayDropdown && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Day of the Week"), /*#__PURE__*/ React.createElement("select", { name: "day", value: day, onChange: (e)=>setDay(e.target.value), className: "border border-gray-300 p-2 w-full", required: true, __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "Select Day"), /*#__PURE__*/ React.createElement("option", { value: "sunday", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Sunday"), /*#__PURE__*/ React.createElement("option", { value: "monday", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Monday"), /*#__PURE__*/ React.createElement("option", { value: "tuesday", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, "Tuesday"), /*#__PURE__*/ React.createElement("option", { value: "wednesday", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "Wednesday"), /*#__PURE__*/ React.createElement("option", { value: "thursday", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "Thursday"), /*#__PURE__*/ React.createElement("option", { value: "friday", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "Friday"), /*#__PURE__*/ React.createElement("option", { value: "saturday", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "Saturday"))), showMonthDayInput && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Day of the Month"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "monthDay", value: monthDay, onChange: (e)=>setMonthDay(e.target.value), className: "border border-gray-300 p-2 w-full", min: "1", max: "31", required: true, __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Time"), /*#__PURE__*/ React.createElement("input", { type: "time", name: "time", value: time, onChange: (e)=>setTime(e.target.value), className: "border border-gray-300 p-2 w-full", required: true, __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "Your Initials"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "initials", value: initials, onChange: (e)=>setInitials(e.target.value), className: "border border-gray-300 p-2 w-full", maxLength: "3", required: true, __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-2 bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, "Complete Task"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, "Task Spreadsheet"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, "Sunday"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, "Monday"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this }, "Tuesday"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this }, "Wednesday"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, "Thursday"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }, "Friday"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }, "Saturday"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, day === 'sunday' ? task + " (" + initials + ")" : ""), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, day === 'monday' ? task + " (" + initials + ")" : ""), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, day === 'tuesday' ? task + " (" + initials + ")" : ""), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, day === 'wednesday' ? task + " (" + initials + ")" : ""), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this }, day === 'thursday' ? task + " (" + initials + ")" : ""), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, day === 'friday' ? task + " (" + initials + ")" : ""), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, day === 'saturday' ? task + " (" + initials + ")" : ""))))))); }