Local Businesses

Discover and support local businesses 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 Add Business\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 \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 Min Rating\n setFilters(prev => ({ ...prev, rating: e.target.value ? parseFloat(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 \n \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 {/* Businesses Grid */}\n {businesses.length === 0 ? (\n

No businesses found

Be the first to add a local business!

\n ) : (\n

\n {businesses.map((business) => (\n \n ))}\n

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

Add New Business

\n setShowCreateForm(false)} />\n

\n )}\n

\n );\n}\n\n// Business creation form\nfunction BusinessForm({ onSubmit, onCancel }: { \n onSubmit: (business: Partial) => void; \n onCancel: () => void; \n}) {\n const [formData, setFormData] = useState({\n name: '',\n description: '',\n category: 'restaurant' as Business['category'],\n address: '',\n location: '',\n phone: '',\n email: '',\n website: '',\n hours: {\n monday: '',\n tuesday: '',\n wednesday: '',\n thursday: '',\n friday: '',\n saturday: '',\n sunday: ''\n },\n tags: [] as string[]\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!formData.name || !formData.description || !formData.address || !formData.location) {\n alert('Please fill in all required fields');\n return;\n }\n \n onSubmit(formData);\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 const handleHoursChange = (day: string, value: string) => {\n setFormData(prev => ({\n ...prev,\n hours: { ...prev.hours, [day]: value }\n }));\n };\n\n const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];\n\n return (\n

\n \n Business Name *\n \n setFormData(prev => ({ ...prev, name: 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

\n \n Phone\n \n setFormData(prev => ({ ...prev, phone: 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 Address *\n \n setFormData(prev => ({ ...prev, address: 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 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 />\n

\n\n

\n \n Website\n \n setFormData(prev => ({ ...prev, website: e.target.value }))}\n placeholder=\"https://\"\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 {/* Business Hours */}\n

\n \n Business Hours\n \n

\n {days.map(day => (\n

\n {day}:\n handleHoursChange(day, e.target.value)}\n placeholder=\"9:00-17:00 or Closed\"\n className=\"flex-1 px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500\"\n />\n

\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 Add Business\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/Businesses.tsx","extension","actionData","errors"]