function MainComponent() { const handleTakePhoto = ()=>{ navigator.mediaDevices.getUserMedia({ video: true }).then((stream)=>{ const video = document.createElement('video'); video.srcObject = stream; video.play(); const mediaStreamTrack = stream.getVideoTracks()[0]; const imageCapture = new ImageCapture(mediaStreamTrack); imageCapture.takePhoto().then((blob)=>{ const imgUrl = URL.createObjectURL(blob); document.querySelector(".photo-output").src = imgUrl; mediaStreamTrack.stop(); }).catch((error)=>console.error('takePhoto() error:', error)); }).catch((error)=>console.error('getUserMedia() error:', error)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F0F3]", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#43454A] text-2xl mt-10 mb-5 fixed top-10 left-1/2 transform -translate-x-1/2", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "本日のお題"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 overflow-x-scroll pb-4 pt-3 px-4 mt-32", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/first-image.jpg", alt: "Followed user's photo 1", className: "w-[300px] h-[400px] rounded-lg", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "path/to/second-image.jpg", alt: "Followed user's photo 2", className: "w-[300px] h-[400px] rounded-lg", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "path/to/third-image.jpg", alt: "Followed user's photo 3", className: "w-[300px] h-[400px] rounded-lg", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleTakePhoto, className: "bg-blue-600 hover:bg-blue-700 text-white font-roboto py-3 px-12 rounded-full my-4 fixed top-48 left-1/2 transform -translate-x-1/2", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "写真を撮る"), /*#__PURE__*/ React.createElement("img", { className: "photo-output w-full h-[400px] rounded-lg mx-auto mt-32", alt: "Captured from camera - current daily challenge photo", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center w-full bg-white p-4 fixed bottom-0 border-t-2 border-gray-300", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-home text-blue-500 text-xl", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-trophy text-gray-400 text-xl", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-book text-gray-400 text-xl", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-user text-gray-400 text-xl", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }))); }