function MainComponent() { const [stream, setStream] = React.useState(null); const handleVideoAccess = async ()=>{ try { const videoStream = await navigator.mediaDevices.getUserMedia({ video: true }); setStream(videoStream); } catch (error) { console.error('Access denied', error); } }; const handleAudioAccess = async ()=>{ try { const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true }); setStream(audioStream); } catch (error) { console.error('Access denied', error); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl rounded-lg bg-white shadow-md p-6", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Chatting App"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "block text-sm font-medium text-[#666] mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "username", name: "username", className: "w-full border-[#ddd] focus:border-[#aaa] rounded-md shadow-sm p-3 font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleVideoAccess, className: "text-white bg-[#1a73e8] hover:bg-[#0c47a1] rounded-full w-12 h-12 text-2xl mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Start video call")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleAudioAccess, className: "text-white bg-[#1a73e8] hover:bg-[#0c47a1] rounded-full w-12 h-12 text-2xl", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#666] mt-2", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Start voice call")))); }