function MainComponent() { const [posts, setPosts] = useState([]); const [selectedPost, setSelectedPost] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [newPost, setNewPost] = useState({ title: "", content: "", author: "" }); const [newComment, setNewComment] = useState({ content: "", author: "" }); const fetchPosts = async ()=>{ setLoading(true); try { const response = await fetch("/api/posts/list", { method: "POST" }); if (!response.ok) throw new Error("Failed to fetch posts"); const data = await response.json(); setPosts(data.posts); } catch (err) { setError("Failed to load posts"); console.error(err); } finally{ setLoading(false); } }; const fetchPost = async (id)=>{ setLoading(true); try { const response = await fetch("/api/posts/get", { method: "POST", body: JSON.stringify({ id }), headers: { "Content-Type": "application/json" } }); if (!response.ok) throw new Error("Failed to fetch post"); const data = await response.json(); setSelectedPost(data); } catch (err) { setError("Failed to load post"); console.error(err); } finally{ setLoading(false); } }; const handleCreatePost = async (e)=>{ e.preventDefault(); setLoading(true); try { const response = await fetch("/api/posts/create", { method: "POST", body: JSON.stringify(newPost), headers: { "Content-Type": "application/json" } }); if (!response.ok) throw new Error("Failed to create post"); setNewPost({ title: "", content: "", author: "" }); fetchPosts(); } catch (err) { setError("Failed to create post"); console.error(err); } finally{ setLoading(false); } }; const handleCreateComment = async (e)=>{ e.preventDefault(); if (!selectedPost) return; setLoading(true); try { const response = await fetch("/api/comments/create", { method: "POST", body: JSON.stringify({ ...newComment, post_id: selectedPost.post.id }), headers: { "Content-Type": "application/json" } }); if (!response.ok) throw new Error("Failed to create comment"); setNewComment({ content: "", author: "" }); fetchPost(selectedPost.post.id); } catch (err) { setError("Failed to create comment"); console.error(err); } finally{ setLoading(false); } }; useEffect(()=>{ fetchPosts(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen morphing-background p-6 animate-fadeIn relative overflow-hidden", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-10 left-10 w-64 h-64 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-20 w-72 h-72 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute -bottom-8 left-20 w-72 h-72 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8 relative", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "glass-morphism rounded-2xl p-8 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01] card-hover", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent animate-fadeIn", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Create New Post"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleCreatePost, className: "space-y-6", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "form-input-floating transform transition-all duration-300 hover:translate-x-1", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", placeholder: "Write an amazing title...", value: newPost.title, onChange: (e)=>setNewPost({ ...newPost, title: e.target.value }), className: "w-full p-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 outline-none text-lg hover-glow", required: true, __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "form-input-floating transform transition-all duration-300 hover:translate-x-1", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "content", placeholder: "Share your thoughts...", value: newPost.content, onChange: (e)=>setNewPost({ ...newPost, content: e.target.value }), className: "w-full p-4 border border-gray-200 rounded-xl h-40 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 outline-none resize-none hover-glow", required: true, __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "form-input-floating transform transition-all duration-300 hover:translate-x-1", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "author", placeholder: "Your name", value: newPost.author, onChange: (e)=>setNewPost({ ...newPost, author: e.target.value }), className: "w-full p-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 outline-none hover-glow", required: true, __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 px-6 rounded-xl font-semibold text-lg transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed pulse-effect", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "loading-spinner -ml-1 mr-3 h-5 w-5 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 149, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 155, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", __source: { fileName: "", lineNumber: 163, columnNumber: 21 }, __self: this })), "Creating...") : "Create Post"))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border-l-4 border-red-500 p-4 rounded-lg animate-shake", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-700", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, error)), selectedPost ? /*#__PURE__*/ React.createElement("div", { className: "glass-morphism rounded-2xl p-8 animate-slideIn card-hover", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedPost(null), className: "mb-6 text-blue-600 hover:text-purple-600 transition-colors duration-300 flex items-center gap-2 font-medium", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, "← Back to Posts"), /*#__PURE__*/ React.createElement("article", { className: "prose prose-lg max-w-none", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, selectedPost.post.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-8 flex items-center gap-2", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }), "By ", selectedPost.post.author), /*#__PURE__*/ React.createElement("div", { className: "leading-relaxed mb-12 text-gray-700 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, selectedPost.post.content)), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-100 pt-8", __source: { fileName: "", lineNumber: 204, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-6 text-gray-800", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, "Comments"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleCreateComment, className: "space-y-4 mb-8", __source: { fileName: "", lineNumber: 208, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "author", placeholder: "Your name", value: newComment.author, onChange: (e)=>setNewComment({ ...newComment, author: e.target.value }), className: "w-full p-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 outline-none", required: true, __source: { fileName: "", lineNumber: 209, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "content", placeholder: "Add to the discussion...", value: newComment.content, onChange: (e)=>setNewComment({ ...newComment, content: e.target.value }), className: "w-full p-4 border border-gray-200 rounded-xl h-32 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 outline-none resize-none", required: true, __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-6 rounded-xl font-semibold transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, loading ? "Posting..." : "Post Comment")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, selectedPost.comments.map((comment)=>/*#__PURE__*/ React.createElement("div", { key: comment.id, className: "bg-gray-50 rounded-xl p-6 transform transition-all duration-300 hover:scale-[1.01]", __source: { fileName: "", lineNumber: 241, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 mb-3", __source: { fileName: "", lineNumber: 245, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full", __source: { fileName: "", lineNumber: 246, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-800", __source: { fileName: "", lineNumber: 247, columnNumber: 23 }, __self: this }, comment.author)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 leading-relaxed", __source: { fileName: "", lineNumber: 251, columnNumber: 21 }, __self: this }, comment.content)))))) : /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 animate-fadeIn", __source: { fileName: "", lineNumber: 260, columnNumber: 11 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, onClick: ()=>fetchPost(post.id), className: "bg-white/80 backdrop-blur-sm rounded-2xl p-6 cursor-pointer transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl border border-gray-100", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-3 text-gray-800", __source: { fileName: "", lineNumber: 267, columnNumber: 17 }, __self: this }, post.title), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 mb-4", __source: { fileName: "", lineNumber: 270, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-6 h-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full", __source: { fileName: "", lineNumber: 271, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 272, columnNumber: 19 }, __self: this }, "By ", post.author)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 line-clamp-3", __source: { fileName: "", lineNumber: 274, columnNumber: 17 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-end", __source: { fileName: "", lineNumber: 275, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-blue-600 hover:text-purple-600 transition-colors duration-300", __source: { fileName: "", lineNumber: 276, columnNumber: 19 }, __self: this }, "Read more →"))))))); /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 288, columnNumber: 3 }, __self: this }, ` .morphing-background { background: linear-gradient(45deg, #f0f9ff, #e0f2fe, #dbeafe, #ede9fe); background-size: 400% 400%; animation: gradientShift 15s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @keyframes blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } .animate-fadeIn { animation: fadeIn 0.5s ease-out; } .animate-slideIn { animation: slideIn 0.5s ease-out; } .animate-shake { animation: shake 0.5s ease-in-out; } .animate-blob { animation: blob 7s infinite; } .animation-delay-2000 { animation-delay: 2s; } .animation-delay-4000 { animation-delay: 4s; } .glass-morphism { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); } .card-hover { transition: all 0.3s ease; transform-style: preserve-3d; perspective: 1000px; } .card-hover:hover { transform: translateY(-5px) rotateX(5deg); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } `); }