Event Detail

1'use client'
2 
3import { Button } from '@/components/ui/button'
4import { cn } from '@/lib/utils'
5import {
6  MapPin,
7  Star,
8  Share2,
9  Heart,
10  ChevronLeft,
11  ChevronRight,
12  CheckCircle,
13  Car,
14  Train,
15  Bike,
16  Footprints,
17  Flag,
18  BadgeCheck,
19  Timer
20} from 'lucide-react'
21import { Suspense, useState } from 'react'
22import type { EventDetails } from './types'
23import {
24  LazyLeafletMap,
25  formatNumber,
26  MapPlaceholder,
27  EventSignalBadge
28} from './shared'
29import { demoEventDetails } from './demo/events'
30 
31// Format date for display
32function formatEventDateTime(startDateTime: string, endDateTime?: string): string {
33  const start = new Date(startDateTime)
34  const now = new Date()
35  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
36  const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000)
37  const startDay = new Date(start.getFullYear(), start.getMonth(), start.getDate())
38 
39  const timeOptions: Intl.DateTimeFormatOptions = { hour: 'numeric', minute: '2-digit', hour12: true }
40  const startTime = start.toLocaleTimeString('en-US', timeOptions)
41 
42  let datePrefix: string
43  if (startDay.getTime() === today.getTime()) {
44    datePrefix = 'Today'
45  } else if (startDay.getTime() === tomorrow.getTime()) {
46    datePrefix = 'Tomorrow'
47  } else {
48    datePrefix = start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
49  }
50 
51  if (endDateTime) {
52    const end = new Date(endDateTime)
53    const endTime = end.toLocaleTimeString('en-US', timeOptions)
54    return `${datePrefix} · ${startTime} - ${endTime}`
55  }
56 
57  return `${datePrefix} · ${startTime}`
58}
59 
60 
61 
62/**
63 * ═══════════════════════════════════════════════════════════════════════════
64 * EventDetailProps
65 * ═══════════════════════════════════════════════════════════════════════════
66 *
67 * Props for the EventDetail component. Displays comprehensive event information
68 * including image carousel, location map, organizer details, and ticket actions.
69 */
70export interface EventDetailProps {
71  data?: {
72    /** The full event details object to display. */
73    event?: EventDetails
74  }
75  actions?: {
76    /** Called when "Get tickets" button is clicked. */
77// … truncated