\n {/* Header */}\n

LocalConnect

Your Community Social Platform

\n \n

\n {currentUser ? (\n

{currentUser.fullName}

{currentUser.location}

\n \n {currentUser.fullName.charAt(0).toUpperCase()}\n \n

\n ) : (\n setShowUserForm(true)}\n className=\"bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-blue-50 transition-colors\"\n >\n Join Community\n \n )}\n

\n\n {/* Navigation */}\n \n\n {/* Main Content */}\n

\n {renderPage()}\n

\n\n {/* User Registration Modal */}\n {showUserForm && (\n

Join LocalConnect

\n setShowUserForm(false)} />\n

\n )}\n

\n );\n}\n\n// Simple user registration form\nfunction UserForm({ onSubmit, onCancel }: { \n onSubmit: (user: Partial) => void; \n onCancel: () => void; \n}) {\n const [formData, setFormData] = useState({\n username: '',\n email: '',\n fullName: '',\n bio: '',\n location: '',\n interests: [] as string[]\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!formData.username || !formData.email || !formData.fullName || !formData.location) {\n alert('Please fill in all required fields');\n return;\n }\n onSubmit(formData);\n };\n\n const handleInterestToggle = (interest: string) => {\n setFormData(prev => ({\n ...prev,\n interests: prev.interests.includes(interest)\n ? prev.interests.filter(i => i !== interest)\n : [...prev.interests, interest]\n }));\n };\n\n const commonInterests = [\n 'community', 'events', 'networking', 'food', 'business', 'sports', \n 'arts', 'technology', 'fitness', 'education', 'volunteer'\n ];\n\n return (\n

\n \n Username *\n \n setFormData(prev => ({ ...prev, username: 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 required\n />\n

\n\n

\n \n Email *\n \n setFormData(prev => ({ ...prev, email: 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 required\n />\n

\n\n

\n \n Full Name *\n \n setFormData(prev => ({ ...prev, fullName: 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 required\n />\n

\n\n

\n \n Location *\n \n setFormData(prev => ({ ...prev, location: e.target.value }))}\n placeholder=\"e.g., San Francisco, CA\"\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 required\n />\n

\n\n

\n \n Bio\n \n setFormData(prev => ({ ...prev, bio: e.target.value }))}\n rows={3}\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 placeholder=\"Tell us about yourself...\"\n />\n

\n\n

\n \n Interests\n \n

\n {commonInterests.map(interest => (\n handleInterestToggle(interest)}\n className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${\n formData.interests.includes(interest)\n ? 'bg-blue-500 text-white'\n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n {interest}\n \n ))}\n

\n\n

\n \n Join Community\n \n \n Cancel\n \n

\n );\n}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/Omosola_1/Create/code/frontend/components/App.tsx","extension","actionData","errors"]