function MainComponent() { const [localStream, setLocalStream] = React.useState(null); const [remoteStream, setRemoteStream] = React.useState(null); const [page, setPage] = React.useState('register'); const [userId, setUserId] = React.useState(''); const [profileOpen, setProfileOpen] = React.useState(false); const startVideoCall = async ()=>{ try { const localVideo = document.getElementById('localVideo'); const remoteVideo = document.getElementById('remoteVideo'); const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); localVideo.srcObject = stream; setLocalStream(stream); remoteVideo.srcObject = stream; setRemoteStream(stream); } catch (error) { console.error('Error accessing webcam: ', error); } }; const generateUserId = ()=>{ const id = Math.floor(10000 + Math.random() * 90000).toString(); setUserId(id); }; const handleRegister = (e)=>{ e.preventDefault(); generateUserId(); setPage('home'); }; const toggleProfile = ()=>{ setProfileOpen(!profileOpen); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-4 bg-[#010101] text-white text-center font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Real Connect")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center justify-center flex-1 w-full", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, page === 'register' ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleRegister, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", placeholder: "Username", className: "mt-2 py-2 px-4 rounded border", required: true, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", className: "mt-2 py-2 px-4 rounded border", required: true, __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 py-2 px-6 bg-[#008CBA] text-white font-roboto rounded hover:bg-[#005f73]", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Register")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-[800px] h-[450px] bg-[#000] flex items-center justify-center rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("video", { id: "localVideo", className: "w-full h-full object-cover", autoPlay: true, muted: true, __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[800px] h-[450px] bg-[#000] flex items-center justify-center rounded-lg overflow-hidden mt-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("video", { id: "remoteVideo", className: "w-full h-full object-cover", autoPlay: true, __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mt-4 py-2 px-6 bg-[#008CBA] text-white font-roboto rounded hover:bg-[#005f73]", onClick: startVideoCall, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Connect"), /*#__PURE__*/ React.createElement("button", { className: "mt-4 py-2 px-6 bg-[#00A36C] text-white font-roboto rounded hover:bg-[#007f56]", onClick: toggleProfile, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Profile"), profileOpen && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-[#f0f0f0] border rounded w-[300px]", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, "UserID: ", userId), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, "Username: YOUR_USERNAME"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, "Login Status: Logged in")), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search User", className: "mt-4 py-2 px-4 rounded border", name: "searchUser", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this })))); }