function MainComponent() { const [participants, setParticipants] = React.useState([]); const [message, setMessage] = React.useState(""); const [isChatVisible, setIsChatVisible] = React.useState(false); const [routes, setRoutes] = React.useState([]); const handleSignUp = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const participant = { email: formData.get('email'), name: formData.get('name') }; setParticipants([ ...participants, participant ]); event.target.reset(); }; const handleChatToggle = ()=>{ setIsChatVisible(!isChatVisible); }; const handleMessageChange = (event)=>{ setMessage(event.target.value); }; const handleMessageSend = (event)=>{ event.preventDefault(); setMessage(""); }; const signUpForm = /*#__PURE__*/ React.createElement("form", { onSubmit: handleSignUp, className: "space-y-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block mb-2 text-sm text-[#121212]", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { name: "name", type: "text", required: true, className: "w-full px-3 py-2 border border-gray-300 rounded font-roboto ", placeholder: "Your name", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block mb-2 text-sm text-[#121212]", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { name: "email", type: "email", required: true, className: "w-full px-3 py-2 border border-gray-300 rounded font-roboto ", placeholder: "Your email", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-[200px] py-2 px-4 bg-[#010101] text-white rounded font-roboto ", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "Sign Up")); const chatButton = /*#__PURE__*/ React.createElement("button", { onClick: handleChatToggle, className: "absolute bottom-0 right-0 m-4 p-2 bg-[#010101] text-white rounded-full font-roboto ", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, "💬"); const chatWindow = isChatVisible ? /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 w-full md:w-[400px] h-[500px] bg-white shadow-lg p-4 font-roboto ", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-auto h-[200px] mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("form", { onSubmit: handleMessageSend, className: "flex space-x-2", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: message, onChange: handleMessageChange, className: "w-full px-3 py-2 border border-gray-300 rounded font-roboto ", placeholder: "Type a message...", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#010101] text-white py-2 px-4 rounded font-roboto ", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Send")), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto h-[100px] mt-4", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setRoutes([ ...routes, 'New Route' ]), className: "mt-2 w-full bg-blue-500 text-white py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "Add Route")) : null; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center justify-center min-h-screen bg-gray-100 relative", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#121212] mb-8", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, "Participant Sign Up"), signUpForm, participants.length > 0 && chatButton, chatWindow, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, ` body { margin: 0; font-family: Roboto, sans-serif; } .fixed { animation: fadeIn 0.5s ease-in-out, riseUp 0.5s ease-in-out; } `)); }