function MainComponent() { const [users, setUsers] = React.useState([ { id: 1, name: 'John Doe', language: 'PHP' }, { id: 2, name: 'Jane Smith', language: 'HTML' }, { id: 3, name: 'Dave Johnson', language: 'MySQL' }, { id: 4, name: 'Alex Doe', language: 'CSS' } ]); const [searchTerm, setSearchTerm] = React.useState(''); const [newUserName, setNewUserName] = React.useState(''); const [newUserLanguage, setNewUserLanguage] = React.useState(''); const createUser = ()=>{ if (newUserName && newUserLanguage) { const newUser = { id: Date.now(), name: newUserName, language: newUserLanguage }; setUsers((prevUsers)=>[ ...prevUsers, newUser ]); setNewUserName(''); setNewUserLanguage(''); } }; const deleteUser = (userId)=>{ setUsers((prevUsers)=>prevUsers.filter((user)=>user.id !== userId)); }; const handleSearch = (event)=>{ setSearchTerm(event.target.value); }; const filteredUsers = searchTerm ? users.filter((user)=>user.name.toLowerCase().includes(searchTerm.toLowerCase()) || user.language.toLowerCase().includes(searchTerm.toLowerCase())) : users; const handleNewUserNameChange = (event)=>{ setNewUserName(event.target.value); }; const handleNewUserLanguageChange = (event)=>{ setNewUserLanguage(event.target.value); }; const createUserList = filteredUsers.map((user)=>/*#__PURE__*/ React.createElement("div", { key: user.id, className: "flex justify-between items-center p-2 border-b border-[#000]", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, user.name), " -", /*#__PURE__*/ React.createElement("span", { className: "text-[#555]", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, " ", user.language)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteUser(user.id), className: "text-red-500", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "🗑️"))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search users...", value: searchTerm, onChange: handleSearch, className: "border p-2 w-full font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, createUserList), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "user-name", placeholder: "Name", value: newUserName, onChange: handleNewUserNameChange, className: "border p-2 flex-1 font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "user-language", value: newUserLanguage, onChange: handleNewUserLanguageChange, className: "border p-2 flex-1 font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Select Language"), /*#__PURE__*/ React.createElement("option", { value: "PHP", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "PHP"), /*#__PURE__*/ React.createElement("option", { value: "HTML", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "HTML"), /*#__PURE__*/ React.createElement("option", { value: "MySQL", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "MySQL"), /*#__PURE__*/ React.createElement("option", { value: "CSS", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "CSS")), /*#__PURE__*/ React.createElement("button", { onClick: createUser, className: "bg-blue-500 text-white p-2 font-roboto", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "Add User"))); }