function MainComponent() { const [users, setUsers] = React.useState([]); const [editIndex, setEditIndex] = React.useState(null); const [inputValue, setInputValue] = React.useState(''); const handleInputChange = (e)=>{ setInputValue(e.target.value); }; const handleAddUser = (e)=>{ e.preventDefault(); if (inputValue !== "" && editIndex === null) { setUsers([ ...users, inputValue ]); setInputValue(''); } }; const handleEdit = (index)=>{ setInputValue(users[index]); setEditIndex(index); }; const handleUpdateUser = (e)=>{ e.preventDefault(); if (inputValue !== "" && editIndex !== null) { const updatedUsers = [ ...users ]; updatedUsers[editIndex] = inputValue; setUsers(updatedUsers); setEditIndex(null); setInputValue(''); } }; const userList = users.map((user, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "py-2 px-4 border-b border-gray-200 flex justify-between items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, user), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEdit(index), className: "text-sm bg-[#FFA500] text-white rounded-md px-3 py-1", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "Edit"))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#121212] py-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "Users Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-6", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "form bg-white p-4 shadow-md rounded-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: editIndex === null ? handleAddUser : handleUpdateUser, className: "flex justify-between gap-3", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userName", value: inputValue, onChange: handleInputChange, placeholder: "Enter user name", className: "p-2 border border-gray-300 rounded-md w-full", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }), editIndex === null ? /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-[#007BFF] text-white rounded-md font-medium w-[120px]", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "Add User") : /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-[#28A745] text-white rounded-md font-medium w-[120px]", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Update"))), users.length > 0 && /*#__PURE__*/ React.createElement("ul", { className: "bg-white shadow rounded-md divide-y divide-gray-200", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, userList))); }