function MainComponent() { const [showConfig, setShowConfig] = React.useState(false); const [showToaster, setShowToaster] = React.useState(false); const [toasterMessage, setToasterMessage] = React.useState(""); const [meetingID, setMeetingID] = React.useState(""); const saveConfig = ()=>{ setToasterMessage("Configuration saved successfully!"); setShowToaster(true); setTimeout(()=>setShowToaster(false), 5000); }; const startMeeting = ()=>{ fetch('/integrations/code-runner/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code: meetingID, language: 'plaintext' }) }).then((response)=>response.json()).then((data)=>{ setToasterMessage("Meeting started successfully!"); setShowToaster(true); setTimeout(()=>setShowToaster(false), 5000); }).catch((error)=>{ setToasterMessage("Error starting the meeting."); setShowToaster(true); setTimeout(()=>setShowToaster(false), 5000); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 left-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "hamburger-react", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md w-[400px]", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4 font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Meeting ID"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "border border-gray-300 p-2 w-full rounded-md", placeholder: "Enter your Meeting ID", name: "meetingID", value: meetingID, onChange: (e)=>setMeetingID(e.target.value), __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex space-x-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startMeeting, className: "bg-blue-500 text-white py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Start"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowConfig(true), className: "bg-gray-500 text-white py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Configuration"))), showConfig && /*#__PURE__*/ React.createElement("div", { className: "absolute flex flex-col items-center bg-white p-6 rounded-lg shadow-md w-[400px] mt-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4 font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Configuration"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "border border-gray-300 p-2 w-full rounded-md mb-4", placeholder: "Quip API Key", name: "quipApiKey", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", className: "border border-gray-300 p-2 w-full rounded-md mb-4", placeholder: "Quip Folder", name: "quipFolder", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", className: "border border-gray-300 p-2 w-full rounded-md mb-4", placeholder: "Output Folder", name: "outputFolder", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex space-x-4", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: saveConfig, className: "bg-green-500 text-white py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Save"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowConfig(false), className: "bg-red-500 text-white py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Close"))), showToaster && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-1/2 transform -translate-x-1/2 p-3 bg-blue-600 text-white rounded-md shadow-md z-50", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, toasterMessage), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, ` @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes slideUp { from { transform: translateY(0); } to { transform: translateY(-100%); } } .fixed.top-0 { animation: slideDown 0.5s forwards, slideUp 0.5s forwards 4.5s; } .hamburger-react { width: 30px; height: 30px; background: url('/path/to/hamburger-icon.svg') no-repeat center center / cover; } `)); }