Event List

1'use client'
2 
3import { Button } from '@/components/ui/button'
4import { Checkbox } from '@/components/ui/checkbox'
5import { cn } from '@/lib/utils'
6import { ChevronDown, ChevronLeft, ChevronRight, SlidersHorizontal, X } from 'lucide-react'
7import { Suspense, useCallback, useRef, useState } from 'react'
8import type { Event } from './types'
9import { EventCard } from './event-card'
10import { demoEvents } from './demo/events'
11import { LazyLeafletMap, MapPlaceholder } from './shared'
12 
13// SVG pin marker - teardrop shape like Google Maps
14function createPinSvg(isSelected: boolean) {
15  const color = '#374151' // slate-700
16  const ringColor = isSelected ? '#9ca3af' : 'transparent' // gray-400 ring when selected
17  return `
18    <svg width="32" height="42" viewBox="0 0 32 42" fill="none" xmlns="http://www.w3.org/2000/svg">
19      ${isSelected ? `<circle cx="16" cy="16" r="14" fill="none" stroke="${ringColor}" stroke-width="3"/>` : ''}
20      <path d="M16 0C7.163 0 0 7.163 0 16c0 12 16 26 16 26s16-14 16-26c0-8.837-7.163-16-16-16z" fill="${color}"/>
21      <circle cx="16" cy="16" r="6" fill="white"/>
22    </svg>
23  `
24}
25 
26// Filter options
27const categoryOptions = ['Music', 'Comedy', 'Classes', 'Sports', 'Food & Drink', 'Arts', 'Film', 'Nightlife', 'Wellness', 'Networking']
28const dateOptions = ['Today', 'Tomorrow', 'This weekend', 'This week', 'Next week', 'This month', 'Custom range']
29const neighborhoodOptions = ['Downtown', 'Hollywood', 'Santa Monica', 'Venice', 'Echo Park', 'Silver Lake', 'Los Feliz', 'DTLA', 'Arts District', 'Brentwood', 'Miracle Mile', 'Hollywood Hills', 'Elysian Park']
30const priceOptions = ['Free', 'Under $25', '$25 - $50', '$50 - $100', '$100+']
31const formatOptions = ['In-person', 'Online', 'Hybrid']
32 
33interface FilterState {
34  categories: string[]
35  dates: string[]
36  neighborhoods: string[]
37  prices: string[]
38  formats: string[]
39}
40 
41/**
42 * Default empty filter state.
43 * @constant
44 */
45const defaultFilters: FilterState = {
46  categories: [],
47  dates: [],
48  neighborhoods: [],
49  prices: [],
50  formats: []
51}
52 
53/**
54 * Filter section component with expandable checkbox list.
55 * @component
56 */
57function FilterSection({
58  title,
59  options,
60  selected,
61  onChange,
62  defaultExpanded = true,
63  showLimit = 5
64}: {
65  title: string
66  options: string[]
67  selected: string[]
68  onChange: (values: string[]) => void
69  defaultExpanded?: boolean
70  showLimit?: number
71}) {
72  const [expanded, setExpanded] = useState(defaultExpanded)
73  const [showAll, setShowAll] = useState(false)
74 
75// … truncated