function MainComponent() { const [searchTerm, setSearchTerm] = useState(""); const [resultsPerPage, setResultsPerPage] = useState(1); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [results, setResults] = useState([]); const handleSearch = async (e)=>{ e.preventDefault(); if (!searchTerm.trim()) return; setLoading(true); setError(""); setResults([]); try { const response = await fetch("https://www.trycreatorconnect.com/api/copy-of-tik-tok-hashtag-search-tool", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", "Access-Control-Allow-Origin": "https://www.trycreatorconnect.com", "Access-Control-Allow-Methods": "POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Accept", Origin: "https://www.trycreatorconnect.com" }, referrerPolicy: "no-referrer", credentials: "include", mode: "cors", body: JSON.stringify({ hashtags: [ searchTerm.replace("#", "") ], resultsPerPage: parseInt(resultsPerPage, 10), shouldDownloadCovers: true, shouldDownloadVideos: false, shouldDownloadSubtitles: true, shouldDownloadSlideshowImages: false, queryId: Date.now().toString() }) }); if (!response.ok) { if (response.status === 403) { throw new Error("Access denied. Please check your permissions."); } if (response.status === 429) { throw new Error("Too many requests. Please try again later."); } throw new Error(`Server error (${response.status}). Please try again.`); } const data = await response.json(); if (!data.success) { setError(data.error || "Failed to fetch results"); return; } const parsedResults = data.data?.map((result)=>({ id: result.id, author: { avatar: result.author.avatar, name: result.author.name, verified: result.author.verified }, content: { text: result.content.text?.replace(/\\n/g, "\n").replace(/\\/g, ""), videoUrl: result.content.videoUrl, videoDuration: result.content.videoDuration }, stats: { likes: result.stats.likes, shares: result.stats.shares, views: result.stats.views, comments: result.stats.comments }, music: { name: result.music.name, author: result.music.author, isOriginal: result.music.isOriginal } })) || []; setResults(parsedResults); if (parsedResults.length === 0) { setError("No results found for this hashtag"); } } catch (error) { console.error("Error fetching TikTok data:", error); if (error.message.includes("NetworkError") || error.message.includes("Failed to fetch")) { setError("Network error. Please check your connection and try again."); } else if (error.message.includes("CORS")) { setError("Unable to access TikTok data. Please try again later."); } else { setError(error.message || "Failed to fetch TikTok data. Please try again."); } } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white px-4", __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("meta", { name: "referrer", content: "no-referrer", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://trycreatorconnect.com/google-maps-extractor-tool", target: "_self", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center py-6 max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "font-bold text-2xl bg-[#00ff00] px-4 py-1 rounded-lg", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, "CreatorConnect"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-6", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { target: "_self", href: "https://trycreatorconnect.com/contract-management", className: "text-lg font-bold text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, "Contract Management"), /*#__PURE__*/ React.createElement("a", { target: "_self", href: "https://trycreatorconnect.com/extract-competitor-amazon-product-data", className: "text-lg font-bold text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "AI Competitor Analysis"), /*#__PURE__*/ React.createElement("a", { target: "_self", href: "https://trycreatorconnect.com/google-maps-extractor-tool", className: "text-lg font-bold text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, "Business Lead Finder"), /*#__PURE__*/ React.createElement("a", { target: "_self", href: "https://trycreatorconnect.com/job-listings", className: "text-lg font-bold text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "Job Listings")))), /*#__PURE__*/ React.createElement("main", { className: "max-w-6xl mx-auto py-12", __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-8", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, "Find Viral Organic TikToks Through Keywords"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "max-w-2xl mx-auto mb-12", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), placeholder: "Enter hashtag (without #, eg. beauty products)", className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00]", required: true, __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "number", min: "1", max: "100", value: resultsPerPage, onChange: (e)=>setResultsPerPage(Number(e.target.value)), placeholder: "# of results", className: "px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-[#00ff00] w-32", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-[#00ff00] text-black px-8 py-3 rounded-lg font-bold hover:opacity-90 disabled:opacity-50", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 189, columnNumber: 26 }, __self: this }) : "Search")), /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-2 text-center", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, "Please give the search about 1 minute to conduct a deep scan")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-8 text-center", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 203, columnNumber: 9 }, __self: this }, results.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow border border-gray-100", __source: { fileName: "", lineNumber: 205, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-w-9 aspect-h-16 bg-gray-100 group", __source: { fileName: "", lineNumber: 209, columnNumber: 15 }, __self: this }, post.content.videoUrl ? /*#__PURE__*/ React.createElement("img", { src: post.content.videoUrl, alt: `TikTok video by ${post.author.name}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 211, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 217, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video text-4xl text-gray-400", __source: { fileName: "", lineNumber: 218, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: post.content.videoUrl, target: "_blank", rel: "noopener noreferrer", className: "absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#00ff00] text-black px-4 py-2 rounded-full font-bold", __source: { fileName: "", lineNumber: 227, columnNumber: 19 }, __self: this }, "Watch on TikTok"))), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 mb-4", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.author.avatar, alt: post.author.name, className: "w-12 h-12 rounded-full border-2 border-[#00ff00]", __source: { fileName: "", lineNumber: 234, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 239, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg flex items-center gap-2", __source: { fileName: "", lineNumber: 240, columnNumber: 21 }, __self: this }, post.author.name, post.author.verified && /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-blue-500", __source: { fileName: "", lineNumber: 243, columnNumber: 25 }, __self: this })))), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mb-6 whitespace-pre-wrap break-words max-h-20 overflow-y-auto", __source: { fileName: "", lineNumber: 248, columnNumber: 17 }, __self: this }, post.content.text), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 text-sm", __source: { fileName: "", lineNumber: 251, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 bg-gray-50 p-2 rounded-lg", __source: { fileName: "", lineNumber: 252, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-pink-500", __source: { fileName: "", lineNumber: 253, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 254, columnNumber: 21 }, __self: this }, post.stats.likes.toLocaleString(), " likes")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 bg-gray-50 p-2 rounded-lg", __source: { fileName: "", lineNumber: 256, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment text-blue-500", __source: { fileName: "", lineNumber: 257, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 258, columnNumber: 21 }, __self: this }, post.stats.comments.toLocaleString(), " comments")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 bg-gray-50 p-2 rounded-lg", __source: { fileName: "", lineNumber: 260, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share text-green-500", __source: { fileName: "", lineNumber: 261, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 262, columnNumber: 21 }, __self: this }, post.stats.shares.toLocaleString(), " shares")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 bg-gray-50 p-2 rounded-lg", __source: { fileName: "", lineNumber: 264, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play text-purple-500", __source: { fileName: "", lineNumber: 265, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 266, columnNumber: 21 }, __self: this }, post.stats.views.toLocaleString(), " views"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-sm text-gray-500", __source: { fileName: "", lineNumber: 269, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 270, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-music", __source: { fileName: "", lineNumber: 271, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 272, columnNumber: 21 }, __self: this }, post.music.name, " - ", post.music.author, post.music.isOriginal && " (Original Sound)"))))))), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-[200px]", __source: { fileName: "", lineNumber: 284, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-3xl text-[#00ff00]", __source: { fileName: "", lineNumber: 285, columnNumber: 13 }, __self: this })), !loading && results.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-8 text-gray-600", __source: { fileName: "", lineNumber: 290, columnNumber: 11 }, __self: this }, "Showing ", results.length, " results"))); }