\n {/* Feed Header */}\n

\n {selectedTeamData ? `${selectedTeamData.name} Fan Posts` : 'All Posts'}\n

\n {selectedTeamData \n ? `Latest discussions from ${selectedTeamData.name} supporters`\n : 'Latest posts from the football community'\n }\n

\n \n

\n {selectedTeam && (\n \n View All Posts\n \n )}\n {currentFan && (\n setShowCreatePost(!showCreatePost)}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors\"\n >\n {showCreatePost ? 'Cancel' : 'Create Post'}\n \n )}\n

\n\n {/* Team Filter */}\n

\n \n All Teams\n \n {teams.slice(0, 8).map(team => (\n onLoadTeamPosts(team.id)}\n className={`px-3 py-1 rounded-full text-sm transition-colors ${\n selectedTeam === team.id\n ? 'text-white'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`}\n style={{\n backgroundColor: selectedTeam === team.id ? team.colors.primary : undefined\n }}\n >\n {team.name}\n \n ))}\n

\n\n {/* Create Post Form */}\n {showCreatePost && currentFan && (\n setShowCreatePost(false)}\n />\n )}\n\n {/* Posts List */}\n {loading ? (\n

⚽

Loading posts...

\n ) : posts.length === 0 ? (\n

📝

No posts yet

\n {selectedTeamData \n ? `Be the first to post about ${selectedTeamData.name}!`\n : 'Be the first to share something with the community!'\n }\n

\n {currentFan && (\n setShowCreatePost(true)}\n className=\"px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors\"\n >\n Create First Post\n \n )}\n

\n ) : (\n

\n {posts.map(post => (\n onLikePost(post.id)}\n />\n ))}\n

\n )}\n

\n );\n}\n\n// Create Post Form Component\nfunction CreatePostForm({ teams, currentFan, onCreatePost, onCancel }: {\n teams: Team[];\n currentFan: Fan;\n onCreatePost: (content: string, teamTag?: string, twitterUrl?: string) => Promise;\n onCancel: () => void;\n}) {\n const [content, setContent] = useState('');\n const [teamTag, setTeamTag] = useState('');\n const [twitterUrl, setTwitterUrl] = useState('');\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState('');\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!content.trim()) return;\n\n setLoading(true);\n setError('');\n\n try {\n await onCreatePost(content, teamTag || undefined, twitterUrl || undefined);\n setContent('');\n setTeamTag('');\n setTwitterUrl('');\n onCancel();\n } catch (err: any) {\n setError(err.message || 'Failed to create post');\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

Create New Post

\n \n {error && (\n

\n {error}\n

\n )}\n\n

\n setContent(e.target.value)}\n placeholder=\"What's on your mind about football?\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n rows={4}\n maxLength={500}\n required\n />\n

\n {content.length}/500\n

\n\n

\n \n Team Tag (optional)\n \n setTeamTag(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n {teams.map(team => (\n \n ))}\n \n

\n\n

\n \n Twitter URL (optional)\n \n setTwitterUrl(e.target.value)}\n placeholder=\"https://twitter.com/...\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n\n

\n \n {loading ? 'Posting...' : 'Post'}\n \n \n Cancel\n \n

\n );\n}\n\n// Post Card Component\nfunction PostCard({ post, getTeamById, onLike }: {\n post: Post;\n getTeamById: (teamId: string) => Team | undefined;\n onLike: () => void;\n}) {\n const teamData = post.teamTag ? getTeamById(post.teamTag) : null;\n const fanTeamData = getTeamById(post.fan?.favoriteTeam || '');\n\n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n const now = new Date();\n const diffMs = now.getTime() - date.getTime();\n const diffMins = Math.floor(diffMs / (1000 * 60));\n const diffHours = Math.floor(diffMs / (1000 * 60 * 60));\n const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));\n\n if (diffMins < 1) return 'Just now';\n if (diffMins < 60) return `${diffMins}m ago`;\n if (diffHours < 24) return `${diffHours}h ago`;\n if (diffDays < 7) return `${diffDays}d ago`;\n return date.toLocaleDateString();\n };\n\n return (\n

\n {/* Post Header */}\n

\n {post.fan?.displayName.charAt(0).toUpperCase()}\n

{post.fan?.displayName}

\n @{post.fan?.username}\n {fanTeamData && (\n \n {fanTeamData.name}\n \n )}\n

{formatDate(post.createdAt)}

\n\n {teamData && (\n

\n {teamData.name}\n

\n )}\n

\n\n {/* Post Content */}\n

{post.content}

\n \n {post.twitterUrl && (\n

\n \n 🐦\n View on Twitter\n ↗\n \n

\n )}\n

\n\n {/* Post Actions */}\n

\n \n ❤️\n {post.likes}\n \n \n

\n 💬\n {post.replies}\n

\n\n \n

\n );\n}","deleted","label",[169,170,151],"frontend","components","permalink","https://www.val.town/x/nanaoseiiiiiiiii/Home/code/frontend/components/PostFeed.tsx","extension","actionData","errors"]