function MainComponent() { const [activePage, setActivePage] = React.useState('servers'); const [selectedServer, setSelectedServer] = React.useState(null); const [selectedFile, setSelectedFile] = React.useState(null); const servers = [ { id: 1, ip: '192.168.1.1', status: 'GREEN' }, { id: 2, ip: '192.168.1.2', status: 'RED' }, { id: 3, ip: '192.168.1.3', status: 'GREEN' } ]; const files = [ { id: 1, name: 'file1.tgz', status: 'GREEN' }, { id: 2, name: 'file2.tgz', status: 'RED' }, { id: 3, name: 'file3.tgz', status: 'GREEN' } ]; const healthDetails = selectedServer ? `Real-time statistics for server ${selectedServer.ip}` : selectedFile ? `Real-time statistics for file ${selectedFile.name}` : 'Details will appear here upon selection...'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full h-screen font-sans", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between bg-blue-500 text-white p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActivePage('servers'), className: "bg-blue-700 px-4 py-2 rounded focus:outline-none", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Servers"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActivePage('files'), className: "bg-blue-700 px-4 py-2 rounded focus:outline-none", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, ".tgz Files"))), /*#__PURE__*/ React.createElement("div", { className: `flex flex-grow ${activePage !== 'servers' ? 'hidden' : ''}`, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/4 bg-gray-100 p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, servers.map((server)=>/*#__PURE__*/ React.createElement("li", { key: server.id, onClick: ()=>setSelectedServer(server), className: `py-2 px-4 ${server.status === 'GREEN' ? 'bg-green-200' : 'bg-red-200'} rounded my-1 cursor-pointer`, __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "Server ", server.id, " (", server.ip, ")"))))), /*#__PURE__*/ React.createElement("div", { className: "w-3/4 bg-white p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Health Status"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, healthDetails)))), /*#__PURE__*/ React.createElement("div", { className: `flex flex-grow ${activePage !== 'files' ? 'hidden' : ''}`, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/4 bg-gray-100 p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, files.map((file)=>/*#__PURE__*/ React.createElement("li", { key: file.id, onClick: ()=>setSelectedFile(file), className: `py-2 px-4 ${file.status === 'GREEN' ? 'bg-green-200' : 'bg-red-200'} rounded my-1 cursor-pointer`, __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, "File ", file.id, " (", file.name, ")"))))), /*#__PURE__*/ React.createElement("div", { className: "w-3/4 bg-white p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Health Status"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, healthDetails))))); }