function MainComponent() { const [username, setUsername] = React.useState(''); const [followers, setFollowers] = React.useState(null); const [isFetching, setIsFetching] = React.useState(false); const [error, setError] = React.useState(''); const handleUsernameChange = (event)=>{ setUsername(event.target.value); }; const fetchInstagramFollowers = async ()=>{ setIsFetching(true); setError(''); setFollowers(null); try { const searchResponse = await fetch(`/integrations/google-search/search?q=${username}+instagram`, { method: 'GET' }); const searchData = await searchResponse.json(); if (searchData.status === "success" && searchData.items.length > 0) { const instagramLink = searchData.items.find((item)=>item.link.includes('instagram.com')).link; const scrapingResponse = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: instagramLink }), headers: { 'Content-Type': 'application/json' } }); const scrapingText = await scrapingResponse.text(); const followersMatch = scrapingText.match(/"edge_followed_by":{"count":(\d+)/); if (followersMatch && followersMatch.length > 1) { setFollowers(parseInt(followersMatch[1], 10)); } else { throw new Error('Could not extract followers count.'); } } else { throw new Error('Instagram page not found in search results.'); } } catch (e) { setError(e.message); } finally{ setIsFetching(false); } }; const handleSubmit = (event)=>{ event.preventDefault(); fetchInstagramFollowers(); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Instagram Followers Counter"), /*#__PURE__*/ React.createElement("form", { className: "flex w-full max-w-sm space-x-3", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-1 p-2 border border-gray-300", type: "text", name: "username", placeholder: "Enter Instagram username", value: username, onChange: handleUsernameChange, required: true, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white", type: "submit", disabled: isFetching, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, isFetching ? 'Fetching...' : 'Get Followers')), followers !== null && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-lg", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, username), " has ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 81, columnNumber: 80 }, __self: this }, followers), " followers."), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-red-600", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, error))); }