function Button({ text, keyboardCommand, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "inline-flex items-center justify-center px-4 py-2 bg-[#1E1E1E] text-white border border-[#2A2A2A] rounded-lg hover:bg-[#2A2A2A] transition-colors duration-200", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, text), keyboardCommand && /*#__PURE__*/ React.createElement("span", { className: "ml-2 px-1.5 py-0.5 text-xs bg-[#2A2A2A] text-white rounded", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, keyboardCommand)); } function ButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { text: "Click me", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Save", keyboardCommand: "⌘S", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Open", keyboardCommand: "⌘O", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [posts, setPosts] = useState([]); const [newPost, setNewPost] = useState(""); const [loading, setLoading] = useState(true); const [userReactions, setUserReactions] = useState({}); const [charCount, setCharCount] = useState(0); const [error, setError] = useState(""); const fetchPosts = useCallback(async ()=>{ try { const response = await fetch("/api/db/whisperwall", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `posts` ORDER BY `created_at` DESC" }) }); const data = await response.json(); setPosts(data || []); setLoading(false); } catch (error) { console.error("Error fetching posts:", error); setLoading(false); } }, []); useEffect(()=>{ const savedReactions = localStorage.getItem("userReactions"); if (savedReactions) { setUserReactions(JSON.parse(savedReactions)); } }, []); useEffect(()=>{ fetch("/api/db/whisperwall", { method: "POST", body: JSON.stringify({ query: "CREATE TABLE IF NOT EXISTS `posts` (id TEXT PRIMARY KEY, content TEXT, created_at TEXT, hearts INTEGER, wow INTEGER, laugh INTEGER)" }) }).then(()=>{ fetchPosts(); }); }, [ fetchPosts ]); const addPost = useCallback(async ()=>{ if (!newPost.trim()) return; const profanityList = [ "fuck", "shit", "ass", "bitch", "dick", "pussy", "cock", "whore", "slut" ]; const containsProfanity = profanityList.some((word)=>newPost.toLowerCase().includes(word)); if (containsProfanity) { setError("Please keep it clean!"); return; } await fetch("/api/db/whisperwall", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `posts` (content, created_at, hearts, wow, laugh) VALUES (?, ?, 0, 0, 0)", values: [ newPost.trim(), new Date().toISOString() ] }) }); setNewPost(""); setError(""); fetchPosts(); }, [ newPost, fetchPosts ]); const react = useCallback(async (postId, reaction)=>{ const reactionKey = `${postId}-${reaction}`; const hasReacted = userReactions[reactionKey]; const newValue = hasReacted ? -1 : 1; const newReactions = { ...userReactions, [reactionKey]: !hasReacted }; setUserReactions(newReactions); localStorage.setItem("userReactions", JSON.stringify(newReactions)); await fetch("/api/db/whisperwall", { method: "POST", body: JSON.stringify({ query: `UPDATE \`posts\` SET \`${reaction}\` = \`${reaction}\` + ? WHERE \`id\` = ?`, values: [ newValue, postId ] }) }); fetchPosts(); }, [ fetchPosts, userReactions ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#151515]", __source: { fileName: "", lineNumber: 108, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-medium text-white mb-2", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-mask mr-2", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }), "Whisperwall"), /*#__PURE__*/ React.createElement("p", { className: "text-[#A4A4A4] text-sm", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, "Share your confessions anonymously")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-lg p-4 mb-8 border border-[#2A2A2A]", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: newPost, onChange: (e)=>{ setNewPost(e.target.value); setCharCount(e.target.value.length); setError(""); }, maxLength: 150, placeholder: "Confess something...", className: `w-full bg-[#151515] text-white rounded p-3 mb-3 resize-none h-24 focus:outline-none border ${charCount > 130 ? "border-[#ff6b6b]" : "border-[#2A2A2A]"} placeholder:text-[#A4A4A4] text-sm transition-colors duration-200`, __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `text-xs ${charCount > 130 ? "text-[#ff6b6b]" : "text-[#A4A4A4]"} transition-colors duration-200`, __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, 150 - newPost.length, " left"), error && /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#ff6b6b] ml-3", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }, error)), /*#__PURE__*/ React.createElement("button", { onClick: addPost, disabled: !newPost.trim(), className: "bg-[#2A2A2A] text-white px-4 py-2 rounded text-sm hover:bg-[#353535] disabled:opacity-50", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, "Confess"))), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center py-8", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#A4A4A4]", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, "Loading...")) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, (posts || []).map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "bg-[#1E1E1E] rounded-lg p-4 shadow-lg border border-[#2A2A2A]", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-sm mb-3", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 justify-end", __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>react(post.id, "hearts"), className: `text-[#A4A4A4] hover:text-white text-sm flex items-center gap-1.5 transition-colors ${userReactions[`${post.id}-hearts`] ? "text-white" : ""}`, __source: { fileName: "", lineNumber: 165, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${userReactions[`${post.id}-hearts`] ? "fas" : "far"} fa-heart`, __source: { fileName: "", lineNumber: 171, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 174, columnNumber: 21 }, __self: this }, post.hearts || 0)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>react(post.id, "wow"), className: `text-[#A4A4A4] hover:text-white text-sm flex items-center gap-1.5 transition-colors ${userReactions[`${post.id}-wow`] ? "text-white" : ""}`, __source: { fileName: "", lineNumber: 176, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${userReactions[`${post.id}-wow`] ? "fas" : "far"} fa-surprise`, __source: { fileName: "", lineNumber: 182, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 185, columnNumber: 21 }, __self: this }, post.wow || 0)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>react(post.id, "laugh"), className: `text-[#A4A4A4] hover:text-white text-sm flex items-center gap-1.5 transition-colors ${userReactions[`${post.id}-laugh`] ? "text-white" : ""}`, __source: { fileName: "", lineNumber: 187, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${userReactions[`${post.id}-laugh`] ? "fas" : "far"} fa-laugh`, __source: { fileName: "", lineNumber: 193, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 196, columnNumber: 21 }, __self: this }, post.laugh || 0)))))))); }