\n setState(prev => ({ ...prev, currentView: 'feed' }))}\n className=\"text-2xl font-bold text-blue-600 hover:text-blue-700\"\n >\n 📝 Daily Blog\n \n

\n \n

\n setState(prev => ({ ...prev, currentView: 'feed' }))}\n className={`px-3 py-2 rounded-md text-sm font-medium ${\n state.currentView === 'feed' \n ? 'bg-blue-600 text-white' \n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n Feed\n \n \n {state.currentUser ? (\n <>\n setState(prev => ({ ...prev, currentView: 'create' }))}\n className={`px-3 py-2 rounded-md text-sm font-medium ${\n state.currentView === 'create' \n ? 'bg-blue-600 text-white' \n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n Write\n \n setState(prev => ({ \n ...prev, \n currentView: 'profile', \n selectedUserId: prev.currentUser?.id \n }))}\n className=\"flex items-center space-x-2 text-gray-600 hover:text-gray-900\"\n >\n

\n {state.currentUser.displayName.charAt(0).toUpperCase()}\n

\n {state.currentUser.displayName}\n \n \n Logout\n \n \n ) : (\n <>\n setState(prev => ({ ...prev, showAuthModal: true, authMode: 'login' }))}\n className=\"text-sm text-gray-600 hover:text-gray-900\"\n >\n Login\n \n setState(prev => ({ ...prev, showAuthModal: true, authMode: 'register' }))}\n className=\"btn-primary text-white px-4 py-2 rounded-md text-sm font-medium\"\n >\n Sign Up\n \n \n )}\n

\n );\n\n const renderAuthModal = () => {\n if (!state.showAuthModal) return null;\n\n return (\n

\n {state.authMode === 'login' ? 'Login' : 'Sign Up'}\n

\n setState(prev => ({ ...prev, showAuthModal: false }))}\n className=\"text-gray-500 hover:text-gray-700\"\n >\n ✕\n \n

\n \n setState(prev => ({ \n ...prev, \n authMode: prev.authMode === 'login' ? 'register' : 'login' \n }))}\n />\n

\n );\n };\n\n const renderContent = () => {\n switch (state.currentView) {\n case 'post':\n return (\n setState(prev => ({ ...prev, currentView: 'feed' }))}\n />\n );\n case 'profile':\n return (\n setState(prev => ({ ...prev, currentView: 'feed' }))}\n />\n );\n case 'create':\n return (\n setState(prev => ({ ...prev, currentView: 'feed' }))}\n />\n );\n default:\n return (\n

\n {state.posts.map(post => (\n setState(prev => ({ \n ...prev, \n currentView: 'post', \n selectedPostId: post.id \n }))}\n onAuthorClick={() => setState(prev => ({ \n ...prev, \n currentView: 'profile', \n selectedUserId: post.author.id \n }))}\n onRefresh={refreshPosts}\n />\n ))}\n \n {state.hasMore && (\n

\n \n {state.loading ? 'Loading...' : 'Load More Posts'}\n \n

\n )}\n \n {!state.hasMore && state.posts.length > 0 && (\n

\n You've reached the end! 🎉\n

\n )}\n

\n );\n }\n };\n\n return (\n

\n {renderHeader()}\n \n

\n {renderContent()}\n

\n \n {renderAuthModal()}\n

\n );\n}\n\n// Auth form component\nfunction AuthForm({ mode, onSubmit, onToggleMode }: {\n mode: 'login' | 'register';\n onSubmit: (data: any) => void;\n onToggleMode: () => void;\n}) {\n const [formData, setFormData] = useState({\n username: '',\n email: '',\n displayName: '',\n bio: ''\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n onSubmit(formData);\n };\n\n return (\n

\n \n Username\n \n setFormData(prev => ({ ...prev, username: e.target.value }))}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n />\n

\n \n {mode === 'register' && (\n <>\n

\n \n Email\n \n setFormData(prev => ({ ...prev, email: e.target.value }))}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n />\n

\n \n

\n \n Display Name\n \n setFormData(prev => ({ ...prev, displayName: e.target.value }))}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n />\n

\n \n

\n \n Bio (optional)\n \n setFormData(prev => ({ ...prev, bio: e.target.value }))}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n rows={3}\n />\n

\n \n )}\n \n \n {mode === 'login' ? 'Login' : 'Sign Up'}\n \n \n

\n \n {mode === 'login' \n ? \"Don't have an account? Sign up\" \n : \"Already have an account? Login\"\n }\n \n

\n \n );\n}","deleted","label",[175,176,158],"frontend","components","permalink","https://www.val.town/x/David_Navi/Blogged/code/frontend/components/App.tsx","extension","actionData","errors"]