function MainComponent() { const [csvData, setCsvData] = React.useState(null); const [attributes, setAttributes] = React.useState([]); const [pageContent, setPageContent] = React.useState(''); const handleFileUpload = (e)=>{ const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = ()=>{ const lines = reader.result.split("\n"); const firstLink = lines.length > 0 ? lines[0].trim() : null; setCsvData(lines); if (firstLink) fetchPage(firstLink); }; reader.readAsText(file); } }; const fetchPage = (url)=>{ fetch(url).then((response)=>response.text()).then((data)=>setPageContent(data)).catch((error)=>console.error('Error fetching page:', error)); }; const handleGetInfo = ()=>{ // handle info extraction and data processing here using selected attributes }; const handleExportToExcel = ()=>{ // handle export to excel here using csvData and selected attributes }; const handleAttributeChange = (e)=>{ const { value } = e.target; setAttributes((prev)=>prev.includes(value) ? prev.filter((attr)=>attr !== value) : [ ...prev, value ]); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "CSV File Upload"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "csvFile", className: "mb-4 p-2 border rounded w-full", onChange: handleFileUpload, __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-md w-[400px] mt-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 text-center", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Web Page Preview"), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto h-[300px] border p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, pageContent)), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-md w-[400px] mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 text-center", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Select Attributes or Links"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "attributes", value: "links", onChange: handleAttributeChange, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), "Links"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "attributes", value: "images", onChange: handleAttributeChange, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }), "Images"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "attributes", value: "headings", onChange: handleAttributeChange, __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), "Headings"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "attributes", value: "paragraphs", onChange: handleAttributeChange, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }), "Paragraphs"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "attributes", value: "metadata", onChange: handleAttributeChange, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }), "Metadata"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white font-bold py-2 px-4 rounded w-full", onClick: handleGetInfo, __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Get Info")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-md w-[400px] mt-4 text-center", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 text-white font-bold py-2 px-4 rounded w-full", onClick: handleExportToExcel, __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "Export to Excel"))); }