function MainComponent() { const [post, setPost] = React.useState(null); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const topics = [ "Technology", "Health", "Lifestyle", "Education", "Business", "Travel" ]; const formatDate = (dateString)=>{ if (!dateString) return "Unknown Date"; const date = new Date(dateString); const now = new Date(); const diffTime = Math.abs(now - date); const diffMinutes = Math.floor(diffTime / (1000 * 60)); const diffHours = Math.floor(diffTime / (1000 * 60 * 60)); const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); const diffMonths = Math.floor(diffTime / (1000 * 60 * 60 * 24 * 30)); const diffYears = Math.floor(diffTime / (1000 * 60 * 60 * 24 * 365)); let timeAgo; if (diffYears > 1) { timeAgo = `${diffYears} years ago`; } else if (diffYears === 1) { timeAgo = "1 year ago"; } else if (diffMonths > 1) { timeAgo = `${diffMonths} months ago`; } else if (diffMonths === 1) { timeAgo = "1 month ago"; } else if (diffDays > 1) { timeAgo = `${diffDays} days ago`; } else if (diffDays === 1) { timeAgo = "1 day ago"; } else if (diffHours > 1) { timeAgo = `${diffHours} hours ago`; } else if (diffHours === 1) { timeAgo = "1 hour ago"; } else if (diffMinutes > 1) { timeAgo = `${diffMinutes} minutes ago`; } else { timeAgo = "Just now"; } const formattedDate = date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }); return { timeAgo, formattedDate }; }; const fetchRandomPost = async (topic, mode = "random", currentUrl = null)=>{ setLoading(true); setError(null); let attempts = 0; const maxAttempts = 3; while(attempts < maxAttempts){ try { const response = await fetch("/api/exa-blog-fetcher", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ topic, mode, currentArticleUrl: currentUrl }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (data && data.length > 0) { const newPost = { ...data[0], content: data[0].fullContent || "No content available", date: formatDate(data[0].publishedDate) }; if (newPost.url !== post?.url) { setPost(newPost); setLoading(false); return; } } else { throw new Error("Invalid data structure received"); } } catch (error) { attempts++; if (attempts === maxAttempts) { setError(error.message); setPost(null); setLoading(false); return; } } } setLoading(false); }; const fetchSimilarPosts = async ()=>{ if (!post || !post.url) return; fetchRandomPost(null, "similar", post.url); }; React.useEffect(()=>{ fetchRandomPost(topics[Math.floor(Math.random() * topics.length)]); }, []); const SkeletonLoader = ()=>/*#__PURE__*/ React.createElement("div", { className: "animate-pulse", __source: { fileName: "", lineNumber: 113, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-200 rounded w-3/4 mb-4", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/4 mb-8", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded mb-2", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-5/6", __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this })); return /*#__PURE__*/ React.createElement("div", { className: "relative max-w-3xl mx-auto font-sans bg-white pb-32", __source: { fileName: "", lineNumber: 124, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white py-4 px-4 border-b border-gray-200 flex justify-between items-center", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, "BlogStumble"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 flex items-center", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, "Built with", " ", /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/5d99ce37-57d2-4860-97f5-f6fd25847d0e/Create_Icon_Dark_RGB_300ppi.png", alt: "Create Logo", className: "w-4 h-4 mx-1", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "https://create.xyz", target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:text-blue-600", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, "create.xyz"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white border-b border-gray-200 mb-4", __source: { fileName: "", lineNumber: 144, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center px-3 py-2", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 mr-2", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 mr-2", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 mr-2", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow mx-2", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: loading ? "Stumbling across blogs..." : post?.url || "", readOnly: true, className: "w-full bg-gray-100 px-3 py-1 rounded text-sm text-gray-600", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: post?.url, target: "_blank", rel: "noopener noreferrer", className: `text-gray-500 hover:text-gray-700 ${loading ? "pointer-events-none opacity-50" : ""}`, __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-external-link-alt", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this })))), loading ? /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(SkeletonLoader, { __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("article", { className: "prose prose-lg max-w-none px-4", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "article-content", __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(SkeletonLoader, { __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this })))) : error ? /*#__PURE__*/ React.createElement("div", { className: "text-center text-red-500", __source: { fileName: "", lineNumber: 185, columnNumber: 9 }, __self: this }, "Error: ", error, ". Please try again.") : post ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("header", { className: "mb-8 px-4", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4 text-gray-900 font-serif", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, post.title || "Untitled Article"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-700", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.image || "/images/avatar.jpg", alt: `Avatar of ${post.author || "Unknown Author"}`, className: "w-12 h-12 rounded-full mr-4", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-lg", __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this }, post.author || "Unknown Author"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 205, columnNumber: 19 }, __self: this }, post.date.timeAgo), " ", /*#__PURE__*/ React.createElement("span", { className: "text-gray-400", __source: { fileName: "", lineNumber: 206, columnNumber: 19 }, __self: this }, "·"), " ", /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this }, post.date.formattedDate))))), post.image && /*#__PURE__*/ React.createElement("img", { src: post.image, alt: "Article illustration", className: "w-full h-[400px] object-cover mb-8", __source: { fileName: "", lineNumber: 215, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("article", { className: "prose prose-lg max-w-none px-4", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "article-content", dangerouslySetInnerHTML: { __html: post.content || "Content is unavailable for this article." }, __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, ` .article-content { font-family: 'Georgia', serif; line-height: 1.8; color: #292929; font-size: 18px; } .article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 2em; margin-bottom: 1em; font-weight: 700; color: #292929; } .article-content h1 { font-size: 2.5em; } .article-content h2 { font-size: 2em; } .article-content h3 { font-size: 1.75em; } .article-content p { margin-bottom: 1.5em; } .article-content a { color: #03a87c; text-decoration: none; border-bottom: 1px solid #03a87c; } .article-content a:hover { color: #018f69; border-bottom-color: #018f69; } .article-content img { max-width: 100%; height: auto; margin: 2em 0; } .article-content ul, .article-content ol { margin-left: 1.5em; margin-bottom: 1.5em; } .article-content li { margin-bottom: 0.5em; } .article-content blockquote { border-left: 3px solid #292929; padding-left: 1em; margin-left: 0; font-style: italic; color: #292929; margin: 2em 0; } .article-content pre { background-color: #f6f8fa; border-radius: 3px; padding: 1em; overflow-x: auto; font-size: 0.9em; margin: 2em 0; } .article-content code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; background-color: #f6f8fa; padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; } `)) : /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500", __source: { fileName: "", lineNumber: 303, columnNumber: 9 }, __self: this }, "No post available."), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-5 right-5 flex flex-col items-end space-y-4 z-50", __source: { fileName: "", lineNumber: 305, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 306, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-20 h-20 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform group-hover:scale-110 flex flex-col items-center justify-center", onClick: ()=>{ const randomTopic = topics[Math.floor(Math.random() * topics.length)]; fetchRandomPost(randomTopic); }, __source: { fileName: "", lineNumber: 307, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl", __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this }, "✨"), /*#__PURE__*/ React.createElement("span", { className: "text-xs mt-1", __source: { fileName: "", lineNumber: 316, columnNumber: 13 }, __self: this }, "Stumble")), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-full right-0 mb-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300", __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-end space-y-2", __source: { fileName: "", lineNumber: 319, columnNumber: 13 }, __self: this }, topics.map((topic, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "bg-white text-gray-700 py-2 px-4 rounded-full shadow hover:bg-gray-100 transition-all duration-200 transform hover:scale-110", onClick: ()=>{ fetchRandomPost(topic); }, __source: { fileName: "", lineNumber: 321, columnNumber: 17 }, __self: this }, topic))))), /*#__PURE__*/ React.createElement("button", { className: "w-20 h-20 bg-gradient-to-r from-blue-500 to-green-500 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110 flex flex-col items-center justify-center", onClick: fetchSimilarPosts, __source: { fileName: "", lineNumber: 334, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 338, columnNumber: 11 }, __self: this }, "More"), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 339, columnNumber: 11 }, __self: this }, "like this")))); }