Event Card

1'use client'
2 
3import {
4  CalendarX,
5  CirclePause,
6  Clock,
7  Flame,
8  MapPin,
9  Sparkles,
10  Star,
11  Ticket,
12  Timer,
13  TrendingUp,
14  XCircle
15} from 'lucide-react'
16import type { Event, EventSignal } from './types'
17import { demoEvent } from './demo/events'
18 
19/**
20 * ═══════════════════════════════════════════════════════════════════════════
21 * EventCardProps
22 * ═══════════════════════════════════════════════════════════════════════════
23 *
24 * Props for the EventCard component. Displays event information with multiple
25 * layout variants, signal badges, vibe tags, and organizer ratings.
26 */
27export interface EventCardProps {
28  data?: {
29    /** The event object to display. */
30    event?: Event
31  }
32  actions?: {
33    /** Called when the card is clicked. */
34    onClick?: (event: Event) => void
35  }
36  appearance?: {
37    /**
38     * Card layout variant.
39     * @default "default"
40     */
41    variant?: 'default' | 'compact' | 'horizontal' | 'covered'
42    /**
43     * Whether to show the event signal badge.
44     * @default true
45     */
46    showSignal?: boolean
47    /**
48     * Whether to show vibe tags.
49     * @default true
50     */
51    showTags?: boolean
52    /**
53     * Whether to show the organizer rating.
54     * @default true
55     */
56    showRating?: boolean
57  }
58}
59 
60function EventSignalBadge({ signal }: { signal: EventSignal }) {
61  const config: Record<
62    EventSignal,
63    { label: string; icon: typeof Flame; className: string }
64  > = {
65    'going-fast': {
66      label: 'Going Fast',
67      icon: Flame,
68      className: 'bg-orange-500/10 text-orange-600 border-orange-200'
69    },
70    popular: {
71      label: 'Popular',
72      icon: TrendingUp,
73      className: 'bg-pink-500/10 text-pink-600 border-pink-200'
74    },
75    'just-added': {
76      label: 'Just Added',
77      icon: Sparkles,
78      className: 'bg-blue-500/10 text-blue-600 border-blue-200'
79    },
80    'sales-end-soon': {
81      label: 'Sales End Soon',
82      icon: Timer,
83      className: 'bg-red-500/10 text-red-600 border-red-200'
84    },
85    'few-tickets-left': {
86      label: 'Few Tickets Left',
87      icon: Ticket,
88      className: 'bg-orange-500/10 text-orange-600 border-orange-200'
89    },
90    canceled: {
91      label: 'Canceled',
92// … truncated