function MainComponent() { const [url, setUrl] = React.useState(''); const [items, setItems] = React.useState([]); const handleSubmit = async (event)=>{ event.preventDefault(); const responseBody = await fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url }) }).then((res)=>res.text()); const parser = new DOMParser(); const doc = parser.parseFromString(responseBody, 'text/html'); const texts = Array.from(doc.querySelectorAll('h1, h2, h3, p, li')).map((element)=>element.textContent.trim()); setItems(texts); }; const handleChange = (event)=>{ setUrl(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-5", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white shadow-md rounded p-5", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "物件検索くん"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "websiteUrl", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "ウェブサイトのURL:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "websiteUrl", name: "websiteUrl", value: url, onChange: handleChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", placeholder: "例: https://example.com", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "内容を抽出")), /*#__PURE__*/ React.createElement("ul", { className: "list-disc mt-5 pl-5", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mt-1", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, item))))); }