function MainComponent() { const [siteUrl, setSiteUrl] = React.useState(''); const [htmlContent, setHtmlContent] = React.useState(''); const [loading, setLoading] = React.useState(false); const fetchHtml = async (url)=>{ setLoading(true); try { const response = await fetch(url); const html = await response.text(); setLoading(false); return html; } catch (error) { setLoading(false); console.error("Error fetching HTML:", error); return ''; } }; const handleSubmit = async (event)=>{ event.preventDefault(); const html = await fetchHtml(siteUrl); setHtmlContent(html); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffffff] shadow-md rounded-lg p-8 w-full max-w-lg", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-2xl font-bold font-roboto mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "HTML出力ツール"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "siteUrl", className: "block mb-2 text-lg font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "WEBサイトのURL:"), /*#__PURE__*/ React.createElement("input", { type: "url", id: "siteUrl", name: "siteUrl", className: "w-full p-2 border border-gray-300 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-[#007bff]", placeholder: "https://example.com", value: siteUrl, onChange: (e)=>setSiteUrl(e.target.value), __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#007bff] text-white rounded-md py-2 font-roboto hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "HTMLを書き出す")), loading && /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto mt-4", __source: { fileName: "", lineNumber: 45, columnNumber: 21 }, __self: this }, "読み込み中..."), htmlContent && /*#__PURE__*/ React.createElement("div", { className: "mt-4 border-t border-gray-300 pt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "HTML Content:"), /*#__PURE__*/ React.createElement("textarea", { readOnly: true, value: htmlContent, className: "w-full h-[200px] p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })))); }