function OperatorConfigLink({ onClick }) { return /*#__PURE__*/ React.createElement("a", { href: "#", onClick: onClick, className: "text-white hover:text-gray-400", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Operator Config"); } function OperatorConfigLinkStory() { const handleClick = ()=>{ console.log('Navigating to operator-config'); // This will be replaced with actual routing logic in the broader app }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(OperatorConfigLink, { onClick: handleClick, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const [currentPage, setCurrentPage] = React.useState('login'); const renderPage = ()=>{ switch(currentPage){ case 'login': return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, "Login Page"), /*#__PURE__*/ React.createElement("form", { className: "w-[300px] bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 12, columnNumber: 17 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "username", name: "username", type: "text", placeholder: "Username", __source: { fileName: "", lineNumber: 13, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "password", name: "password", type: "password", placeholder: "*********", __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", __source: { fileName: "", lineNumber: 20, columnNumber: 17 }, __self: this }, "Sign In")))); case 'menu': return /*#__PURE__*/ React.createElement("section", { id: "menu", className: "p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Menu Page"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Content for Menu Page")); case 'customer-config': return /*#__PURE__*/ React.createElement("section", { id: "customer-config", className: "p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Configuration Page for Customer"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Content for Customer Configuration Page")); case 'operator-config': return /*#__PURE__*/ React.createElement("section", { id: "operator-config", className: "p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Configuration Page for Operator"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Content for Operator Configuration Page")); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, renderPage(), /*#__PURE__*/ React.createElement("nav", { className: "bg-[#1a202c] w-full", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex justify-center p-4 space-x-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", onClick: ()=>setCurrentPage('menu'), className: "text-white hover:text-gray-400", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Menu")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", onClick: ()=>setCurrentPage('customer-config'), className: "text-white hover:text-gray-400", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "Customer Config")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(OperatorConfigLink, { onClick: ()=>setCurrentPage('operator-config'), __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }))))); }