function MainComponent() { const [isModalOpen, setIsModalOpen] = React.useState(false); const [modalType, setModalType] = React.useState(''); const openModal = (type)=>{ setIsModalOpen(true); setModalType(type); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "User Management"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>openModal('create'), className: "bg-blue-500 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Create User")), /*#__PURE__*/ React.createElement("table", { className: "min-w-full table-auto", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "Actions"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "John Doe"), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "johndoe@example.com"), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 flex items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>openModal('edit'), className: "bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 mr-2 rounded", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 31, columnNumber: 19 }, __self: this }), " Edit"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>openModal('delete'), className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }), " Delete")))))), isModalOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, modalType === 'create' ? 'Create User' : modalType === 'edit' ? 'Edit User' : 'Delete User')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, modalType === 'delete' ? /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "Are you sure you want to delete this user?") : /*#__PURE__*/ React.createElement("form", { className: "flex flex-col", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, "Name:"), /*#__PURE__*/ React.createElement("input", { className: "mb-4 p-2 border rounded", type: "text", name: "name", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, "Email:"), /*#__PURE__*/ React.createElement("input", { className: "mb-4 p-2 border rounded", type: "email", name: "email", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsModalOpen(false), className: "bg-blue-500 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Close"))))); }