function MainComponent() { const [serverURL, setServerURL] = React.useState(''); const [topic, setTopic] = React.useState(''); const [login, setLogin] = React.useState(''); const [password, setPassword] = React.useState(''); const [log, setLog] = React.useState(''); const [notifications, setNotifications] = React.useState([]); const handleConnect = ()=>{ const isConnected = serverURL && topic && login && password; if (isConnected) { const connectedMessage = `Connected to ${serverURL} on topic ${topic} with login ${login}`; setNotifications((prevNotifications)=>[ ...prevNotifications, connectedMessage ]); setLog(connectedMessage); } else { const failedMessage = "Connection failed. Make sure all fields are filled correctly."; setNotifications((prevNotifications)=>[ ...prevNotifications, failedMessage ]); setLog(failedMessage); } }; const handleDisconnect = ()=>{ setNotifications((prevNotifications)=>[ ...prevNotifications, `Disconnected from ${serverURL}` ]); setLog(`Disconnected from ${serverURL}`); setServerURL(''); setTopic(''); setLogin(''); setPassword(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5] p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg bg-white shadow-md rounded-lg p-6", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-roboto font-bold text-[#333] mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "MQTT Client"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "mqtt-server", className: "block text-sm font-medium text-[#666] mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Server URL"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "mqtt-server", id: "mqtt-server", value: serverURL, onChange: (e)=>setServerURL(e.target.value), className: "appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-300 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", placeholder: "mqtt://yourserver.com", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "mqtt-topic", className: "block text-sm font-medium text-[#666] mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Topic"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "mqtt-topic", id: "mqtt-topic", value: topic, onChange: (e)=>setTopic(e.target.value), className: "appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-300 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", placeholder: "Your topic", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "mqtt-login", className: "block text-sm font-medium text-[#666] mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "mqtt-login", id: "mqtt-login", value: login, onChange: (e)=>setLogin(e.target.value), className: "appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-300 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", placeholder: "Your login", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "mqtt-password", className: "block text-sm font-medium text-[#666] mb-2", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "mqtt-password", id: "mqtt-password", value: password, onChange: (e)=>setPassword(e.target.value), className: "appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-300 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", placeholder: "Your password", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "mqtt-log", className: "block text-sm font-medium text-[#666] mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Log"), /*#__PURE__*/ React.createElement("textarea", { name: "mqtt-log", id: "mqtt-log", value: log, onChange: (e)=>setLog(e.target.value), className: "appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-300 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", placeholder: "Log", readOnly: true, __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#007bff] hover:bg-[#0069d9] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: handleConnect, __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Connect"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#dc3545] hover:bg-[#c82333] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: handleDisconnect, __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Disconnect"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mt-6", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-roboto font-bold text-[#333]", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "Notifications ", /*#__PURE__*/ React.createElement("i", { className: "fa fa-bell", __source: { fileName: "", lineNumber: 113, columnNumber: 81 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-4 h-[200px] overflow-auto", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, notifications.map((notification, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, notification))))); }