function MainComponent() { const [url, setUrl] = React.useState(''); const [data, setData] = React.useState(null); const [isFetching, setIsFetching] = React.useState(false); const fetchData = async (event)=>{ event.preventDefault(); setIsFetching(true); try { const response = await fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url }) }); const fetchedData = await response.text(); setData(fetchedData); } catch (error) { console.error('Error fetching data:', error); setData(null); } setIsFetching(false); }; const handleUrlChange = (event)=>{ setUrl(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg space-y-4", onSubmit: fetchData, __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 34, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "grid-url", __source: { fileName: "", lineNumber: 35, columnNumber: 25 }, __self: this }, "URL"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", id: "grid-url", type: "text", placeholder: "https://example.com", name: "url", value: url, onChange: handleUrlChange, __source: { fileName: "", lineNumber: 41, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center w-full px-3", __source: { fileName: "", lineNumber: 53, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", disabled: isFetching, __source: { fileName: "", lineNumber: 54, columnNumber: 25 }, __self: this }, isFetching ? 'Fetching...' : 'Fetch Data')))), data && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mt-4 px-3", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this }, "Scraped HTML"), /*#__PURE__*/ React.createElement("textarea", { className: "appearance-none w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", rows: "10", readOnly: true, value: data, __source: { fileName: "", lineNumber: 69, columnNumber: 21 }, __self: this }))); }