function MainComponent() { const [role, setRole] = React.useState(null); const [fileForReview, setFileForReview] = React.useState(null); const [reviewText, setReviewText] = React.useState(""); const handleRoleSelect = (selectedRole)=>{ setRole(selectedRole); // Reset state when switching roles setFileForReview(null); setReviewText(""); }; const handleFileChange = (event)=>{ const file = event.target.files[0]; if (file) { setFileForReview(file); } }; const handleReviewChange = (event)=>{ setReviewText(event.target.value); }; const handleSendReview = ()=>{ // Logic to send review to director setFileForReview(null); setReviewText(""); }; const uploadFileSection = /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "file-upload", className: "block text-sm font-medium mb-3", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "Upload File"), /*#__PURE__*/ React.createElement("input", { id: "file-upload", name: "file", type: "file", onChange: handleFileChange, className: "block w-full text-sm p-2 bg-white border rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); const reviewFileSection = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "file-review", className: "block text-sm font-medium mb-3", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "Write Review"), /*#__PURE__*/ React.createElement("textarea", { id: "file-review", name: "review", rows: "6", value: reviewText, onChange: handleReviewChange, className: "block w-full p-2 bg-white border rounded", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendReview, className: "mt-4 px-4 py-2 bg-[#2563eb] text-white rounded", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "Send Review")); const directorView = /*#__PURE__*/ React.createElement(React.Fragment, null, fileForReview && /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 25 }, __self: this }, 'File "', fileForReview.name, '" is ready to send to the teacher.'), !fileForReview && uploadFileSection); const teacherView = fileForReview ? reviewFileSection : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 46, columnNumber: 59 }, __self: this }, "No file to review."); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full h-screen md:p-8 bg-[#f7f7f7] font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between p-4 bg-[#1e293b] text-white", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "File Management System"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRoleSelect('Director'), className: `mx-2 px-4 py-2 rounded ${role === 'Director' ? 'bg-[#0284c7]' : 'bg-[#2563eb]'}`, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Director"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRoleSelect('Teacher'), className: `mx-2 px-4 py-2 rounded ${role === 'Teacher' ? 'bg-[#0284c7]' : 'bg-[#2563eb]'}`, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Teacher"))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-full md:w-1/4 p-4 bg-white border-r", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Actions"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, role === 'Director' ? /*#__PURE__*/ React.createElement("li", { className: "mb-3", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center p-2 w-full text-left", onClick: ()=>setFileForReview(null), __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-upload text-[#2563eb] mr-2", __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }), "Upload File")) : /*#__PURE__*/ React.createElement("li", { className: "mb-3", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center p-2 w-full text-left disabled:opacity-50", disabled: !fileForReview, __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-file-text-o text-[#2563eb] mr-2", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }), "Write Review")))), /*#__PURE__*/ React.createElement("section", { className: "w-full md:w-3/4 p-4", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, role == null && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 78, columnNumber: 28 }, __self: this }, "Please select a role to begin."), role === 'Director' && directorView, role === 'Teacher' && teacherView)), /*#__PURE__*/ React.createElement("footer", { className: "p-4 bg-[#1e293b] text-white text-center", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "© 2023 File Management System")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, ` .disabled { pointer-events: none; } `)); }