\n {/* Header */}\n

\n {user.avatar || user.displayName.charAt(0).toUpperCase()}\n

Create Post

Share with the community

\n\n {/* Form */}\n

\n setContent(e.target.value)}\n onFocus={() => setExpanded(true)}\n placeholder={expanded ? \"What's on your mind?\" : randomSuggestion}\n className={`w-full p-4 border border-gray-200 rounded-lg resize-none transition-all duration-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent ${\n expanded ? 'h-32' : 'h-16'\n }`}\n maxLength={2000}\n />\n \n {/* Character count */}\n {expanded && (\n

\n {content.length}/2000\n

\n )}\n

\n\n {/* Actions */}\n {expanded && (\n

\n setContent(prev => prev + ' ✨')}\n >\n 😊\n \n setContent(prev => prev + ' 🖼️')}\n >\n 📷\n \n setContent(prev => prev + ' 📍')}\n >\n 📍\n \n

\n\n

\n {\n setExpanded(false);\n setContent('');\n }}\n className=\"btn-ghost\"\n >\n Cancel\n \n \n {loading ? (\n \n

\n Posting...\n \n ) : (\n 'Post ✨'\n )}\n \n

\n )}\n

\n\n {/* Quick suggestions when not expanded */}\n {!expanded && (\n

Quick ideas:

\n {['💭 Thought', '📸 Photo', '🎉 Update', '❓ Question'].map((tag) => (\n {\n setExpanded(true);\n setContent(tag + ' ');\n }}\n className=\"text-xs px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-full transition-colors duration-200\"\n >\n {tag}\n \n ))}\n

\n )}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/jex/io/code/frontend/components/CreatePost.tsx","extension","actionData","errors"]