function MainComponent() { const handleRecord = ()=>{ navigator.mediaDevices.getUserMedia({ video: true }).then((stream)=>{ const video = document.querySelector('video'); if (video) { video.srcObject = stream; } }).catch((error)=>console.log(error)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 w-full py-4 shadow", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-white font-roboto text-center", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Video Interview App")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center justify-center flex-1 w-full px-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-[800px] bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Interview Question:"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto mb-6", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "What is your experience with managing large projects?"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-full", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleRecord, className: "bg-green-500 text-white px-4 py-2 rounded hover:bg-green-700 font-roboto", name: "recordButton", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Record Answer")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full flex justify-center", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("video", { className: "w-full max-w-[400px] h-[300px] bg-black", autoPlay: true, muted: true, __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "bg-blue-600 w-full py-4 shadow mt-8", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-white font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "© 2023 Video Interview App")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } `)); }