function MainComponent() { const [projects, setProjects] = React.useState([]); const [newProject, setNewProject] = React.useState({ name: '', description: '' }); const handleAddProject = (event)=>{ event.preventDefault(); const trimmedName = newProject.name.trim(); const trimmedDescription = newProject.description.trim(); if (trimmedName && trimmedDescription) { setProjects([ ...projects, newProject ]); setNewProject({ name: '', description: '' }); } }; const handleInputChange = (event)=>{ setNewProject({ ...newProject, [event.target.name]: event.target.value }); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-6 text-[#5d5fef] font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Public Lighting Modernization Projects"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddProject, className: "flex flex-col gap-4 mb-6", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: newProject.name, onChange: handleInputChange, className: "border-2 border-gray-300 p-2 w-full", placeholder: "Project Name", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { id: "rich-text-wrapper", className: "border-2 border-gray-300 p-2 w-full", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "rich-text-editor", contentEditable: true, name: "description", onInput: handleInputChange, className: "outline-none w-full h-full", "data-placeholder": "Project Description", suppressContentEditableWarning: true, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, newProject.description)), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#5d5fef] text-white font-semibold rounded hover:bg-[#7f7fd5] transition ease-in-out duration-300", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Add Project")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, projects.map((project, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-4 rounded shadow-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg text-[#4a4e69] mb-2 font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, project.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, project.description), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Status: Pending"))))); }