Local Events

Discover and join events in your community

\n \n setShowCreateForm(true)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors\"\n disabled={!currentUser}\n >\n Create Event\n \n

\n\n {/* Filters */}\n

\n Category\n setFilters(prev => ({ ...prev, category: e.target.value as any || undefined }))}\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 \n \n \n \n \n \n \n

\n \n

\n Location\n setFilters(prev => ({ ...prev, location: e.target.value || undefined }))}\n placeholder=\"Search location...\"\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 Start Date\n setFilters(prev => ({ ...prev, startDate: e.target.value || undefined }))}\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 setFilters({})}\n className=\"w-full px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors\"\n >\n Clear Filters\n \n

\n\n {/* Events Grid */}\n {events.length === 0 ? (\n

No events found

Try adjusting your filters or create the first event!

\n ) : (\n

\n {events.map((event) => (\n \n ))}\n

\n )}\n\n {/* Create Event Modal */}\n {showCreateForm && (\n

Create New Event

\n setShowCreateForm(false)} />\n

\n )}\n

\n );\n}\n\n// Event creation form\nfunction EventForm({ onSubmit, onCancel }: { \n onSubmit: (event: Partial) => void; \n onCancel: () => void; \n}) {\n const [formData, setFormData] = useState({\n title: '',\n description: '',\n category: 'community' as Event['category'],\n location: '',\n address: '',\n startDate: '',\n endDate: '',\n startTime: '',\n endTime: '',\n maxAttendees: '',\n tags: [] as string[]\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!formData.title || !formData.description || !formData.location || !formData.startDate || !formData.startTime) {\n alert('Please fill in all required fields');\n return;\n }\n \n onSubmit({\n ...formData,\n maxAttendees: formData.maxAttendees ? parseInt(formData.maxAttendees) : undefined\n });\n };\n\n const handleTagAdd = (tag: string) => {\n if (tag && !formData.tags.includes(tag)) {\n setFormData(prev => ({ ...prev, tags: [...prev.tags, tag] }));\n }\n };\n\n const handleTagRemove = (tag: string) => {\n setFormData(prev => ({ ...prev, tags: prev.tags.filter(t => t !== tag) }));\n };\n\n return (\n

\n \n Event Title *\n \n setFormData(prev => ({ ...prev, title: 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 Description *\n \n setFormData(prev => ({ ...prev, description: 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 required\n />\n

\n\n

\n \n Category *\n \n setFormData(prev => ({ ...prev, category: e.target.value as any }))}\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 \n \n \n \n \n \n

\n\n

\n \n Max Attendees\n \n setFormData(prev => ({ ...prev, maxAttendees: 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 min=\"1\"\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 Address\n \n setFormData(prev => ({ ...prev, address: e.target.value }))}\n placeholder=\"Specific venue address\"\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 Start Date *\n \n setFormData(prev => ({ ...prev, startDate: 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 End Date\n \n setFormData(prev => ({ ...prev, endDate: 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\n

\n \n Start Time *\n \n setFormData(prev => ({ ...prev, startTime: 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 End Time\n \n setFormData(prev => ({ ...prev, endTime: 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\n

\n \n Tags\n \n

\n {formData.tags.map(tag => (\n \n {tag}\n handleTagRemove(tag)}\n className=\"ml-1 text-blue-600 hover:text-blue-800\"\n >\n ×\n \n \n ))}\n

\n {\n if (e.key === 'Enter') {\n e.preventDefault();\n handleTagAdd(e.currentTarget.value);\n e.currentTarget.value = '';\n }\n }}\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 Create Event\n \n \n Cancel\n \n

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