function IframeUrlInput({ url, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "url", placeholder: "Enter iframe URL", className: "mt-4 p-2 w-3/4 border rounded", value: url, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function IframeUrlInputStory() { const [url, setUrl] = React.useState(''); const handleChange = (event)=>{ setUrl(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(IframeUrlInput, { url: url, onChange: handleChange, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent() { const [url, setUrl] = React.useState(""); const [screenshots, setScreenshots] = React.useState([]); const [timer, setTimer] = React.useState(10); function handleChange(event) { setUrl(event.target.value); } React.useEffect(()=>{ const interval = setInterval(()=>{ setTimer((prevTimer)=>prevTimer > 0 ? prevTimer - 1 : 10); }, 1000); if (timer === 0) { const iframeElement = document.querySelector("iframe"); if (iframeElement) { const iframeDocument = iframeElement.contentWindow.document; if (iframeDocument) { const originalHtml2canvas = window.html2canvas; if (originalHtml2canvas) { window.html2canvas(iframeDocument.body).then(function(canvas) { const img = canvas.toDataURL("image/jpeg"); setScreenshots((prevScreenshots)=>[ ...prevScreenshots, img ]); }); } } } } return ()=>clearInterval(interval); }, [ timer ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mt-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "tapcode"), /*#__PURE__*/ React.createElement(IframeUrlInput, { url: url, onChange: handleChange, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative w-3/4 h-[calc(100vh/3)] mt-4 overflow-hidden", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: url, className: "w-full h-full", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-2 right-2 bg-white bg-opacity-75 rounded-full px-2 py-1 text-sm", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, timer, "s")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center mt-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full table-auto", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "font-roboto text-left", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Screenshots"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, screenshots.map((src, index)=>{ const imgAlt = `Screenshot ${index + 1} of ${url}`; return /*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: src, alt: imgAlt, className: "w-[400px] h-[300px] border-4 border-[#ff0000]", __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this }))); }))))); }