'use client'
import { useState } from 'react'
import { Search, Filter, Grid, List, MapPin, Star, Heart, Users } from 'lucide-react'
import Link from 'next/link'
// Mock venues data
const venuesData = [
{
id: '1',
name: 'Grand Ballroom Palace',
location: 'Downtown, Manhattan',
rating: 4.9,
reviewCount: 127,
price: 2500,
capacity: '200-500 guests',
image: 'https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=800&h=600&fit=crop',
amenities: ['Catering', 'Parking', 'WiFi', 'AV Equipment'],
category: 'wedding',
isLiked: false
},
{
id: '2',
name: 'Skyline Rooftop Venue',
location: 'Midtown, Manhattan',
rating: 4.8,
reviewCount: 89,
price: 3200,
capacity: '100-300 guests',
image: 'https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=800&h=600&fit=crop',
amenities: ['City Views', 'Outdoor Space', 'Bar', 'Photography'],
category: 'corporate',
isLiked: true
},
{
id: '3',
name: 'Garden Estate Villa',
location: 'Westchester, NY',
rating: 4.7,
reviewCount: 156,
price: 1800,
capacity: '50-150 guests',
image: 'https://images.unsplash.com/photo-1470309864661-68328b2cd0a5?w=800&h=600&fit=crop',
amenities: ['Gardens', 'Bridal Suite', 'Catering Kitchen', 'Parking'],
category: 'wedding',
isLiked: false
},
{
id: '4',
name: 'Modern Conference Center',
location: 'Financial District',
rating: 4.6,
reviewCount: 203,
price: 1200,
capacity: '50-200 guests',
image: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&h=600&fit=crop',
amenities: ['Tech Setup', 'Presentation Tools', 'Catering', 'WiFi'],
category: 'corporate',
isLiked: false
},
{
id: '5',
name: 'Historic Mansion',
location: 'Brooklyn Heights',
rating: 4.9,
reviewCount: 94,
price: 2800,
capacity: '100-250 guests',
image: 'https://images.unsplash.com/photo-1464207687429-7505649dae38?w=800&h=600&fit=crop',
amenities: ['Historic Charm', 'Photography', 'Gardens', 'Valet'],
category: 'wedding',
isLiked: true
},
{
id: '6',
name: 'Waterfront Pavilion',
location: 'Battery Park',
rating: 4.8,
reviewCount: 178,
price: 3500,
capacity: '150-400 guests',
image: 'https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=800&h=600&fit=crop',
amenities: ['Water Views', 'Outdoor Ceremony', 'Catering', 'Lighting'],
category: 'party',
isLiked: false
},
{
id: '7',
name: 'Urban Loft Space',
location: 'SoHo, Manhattan',
rating: 4.5,
reviewCount: 67,
price: 1500,
capacity: '30-100 guests',
image: 'https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&h=600&fit=crop',
amenities: ['Natural Light', 'Flexible Layout', 'WiFi', 'Kitchen'],
category: 'party',
isLiked: false
},
{
id: '8',
name: 'Elegant Banquet Hall',
location: 'Queens, NY',
rating: 4.4,
reviewCount: 234,
price: 2200,
capacity: '150-350 guests',
image: 'https://images.unsplash.com/photo-1445019980597-93fa8acb246c?w=800&h=600&fit=crop',
amenities: ['Dance Floor', 'Full Bar', 'Catering', 'Valet Parking'],
category: 'banquet',
isLiked: false
}
]
export default function VenueListings() {
const [venues, setVenues] = useState(venuesData)
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
const [searchTerm, setSearchTerm] = useState('')
const [filters, setFilters] = useState({
category: '',
priceRange: '',
capacity: '',
location: '',
rating: ''
})
const [showFilters, setShowFilters] = useState(false)
const toggleLike = (venueId: string) => {
setVenues(venues.map(venue =>
venue.id === venueId
? { ...venue, isLiked: !venue.isLiked }
: venue
))
}
const filteredVenues = venues.filter(venue => {
const matchesSearch = venue.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
venue.location.toLowerCase().includes(searchTerm.toLowerCase())
const matchesCategory = !filters.category || venue.category === filters.category
// Add more filter logic here
return matchesSearch && matchesCategory
})
return (
)
}
{/* Header */}
{/* Search and Filters */}
{/* Venues Grid/List */}
Browse All Venues
Discover the perfect space for your next event
{/* Search Bar */}
{/* Results Header */}
Showing {filteredVenues.length} venues
{filteredVenues.map((venue) => (
{/* Pagination */}
{/* Image */}
{/* Like Button */}
{/* Price Badge */}
{/* Content */}
))}
${venue.price.toLocaleString()}/day
{venue.name}
{venue.amenities.slice(0, 3).map((amenity) => (
{amenity}
))}
{venue.amenities.length > 3 && (
+{venue.amenities.length - 3} more
)}
{/* Actions */}
View Details