function MainComponent() { const [inputValue1, setInputValue1] = React.useState(""); const [inputValue2, setInputValue2] = React.useState(""); const [isSecondBarVisible, setIsSecondBarVisible] = React.useState(false); const handleInputChange1 = (event)=>{ setInputValue1(event.target.value); }; const handleInputChange2 = (event)=>{ setInputValue2(event.target.value); }; const handleSendMessage = ()=>{ alert("Message Sent: " + inputValue1 + (isSecondBarVisible ? " ; " + inputValue2 : "")); setInputValue1(""); setInputValue2(""); }; const handleClearMessage = ()=>{ setInputValue1(""); setInputValue2(""); }; const toggleSecondBarVisibility = ()=>{ setIsSecondBarVisible(!isSecondBarVisible); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#010101]", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#121212] p-4 text-[#d1d1d1] font-roboto flex justify-between items-center shadow-lg", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl text-[#0af]", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Open AI CHATGPT: Top Secret")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[250px] bg-[#121212] p-5 text-[#d1d1d1] flex flex-col shadow-inner border-r-4 border-[#0af] animate-border-tracer", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#0af] mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "CHATGPT Navigation"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#121212] hover:bg-[#333333] text-[#d1d1d1] py-2 rounded shadow", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#121212] hover:bg-[#333333] text-[#d1d1d1] py-2 rounded shadow", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#121212] hover:bg-[#333333] text-[#d1d1d1] py-2 rounded shadow", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#121212] hover:bg-[#333333] text-[#d1d1d1] py-2 rounded shadow", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Logout")), /*#__PURE__*/ React.createElement("button", { onClick: toggleSecondBarVisibility, className: "w-full bg-[#0af] text-[#121212] py-2 rounded shadow mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, isSecondBarVisible ? "Hide Extra Bar" : "Add Extra Bar")), /*#__PURE__*/ React.createElement("main", { className: "flex-1 flex flex-col justify-end items-center py-5 relative", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#121212] p-4 text-center text-sm text-[#d1d1d1] shadow-inner border-t-4 border-[#0af] mt-auto", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "© 2023 The Future of AI. Confidential."), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, ` @keyframes border-tracer { 0%, 100% { box-shadow: 0 0 10px #0af, 0 0 20px #0af, 0 0 40px #0af, 0 0 80px #0af, 0 0 160px #0af; } 50% { box-shadow: 0 0 10px #f00, 0 0 20px #f00, 0 0 40px #f00, 0 0 80px #f00, 0 0 160px #f00; } } .animate-border-tracer { animation: border-tracer 2s infinite; } `)); }