Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<BaseCard
hoverable
clickable
:data-testid="`event-card-${event.id}`"
@click="handleClick"
>
<div class="flex items-start justify-between gap-4">
<!-- Event Info -->
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-2 flex-wrap">
<h3 class="text-lg font-semibold text-secondary-900 truncate">
{{ event.title }}
</h3>
<BaseBadge :variant="event.type" size="sm">
{{ eventTypeLabel }}
</BaseBadge>
</div>
<div class="space-y-1">
<p class="text-sm text-secondary-600 flex items-center gap-1.5">
<span class="text-secondary-400">📅</span>
{{ formattedDate }}
</p>
<p class="text-sm text-secondary-600 flex items-center gap-1.5">
<span class="text-secondary-400">🕐</span>
{{ formattedTime }}
</p>
<p class="text-sm text-secondary-600 flex items-center gap-1.5 truncate">
<span class="text-secondary-400">📍</span>
{{ event.location }}
</p>
</div>
</div>
<!-- Attendance Summary -->
<div
v-if="showAttendance"
class="text-right flex-shrink-0"
>
<p class="text-2xl font-bold text-success-600">
{{ attendanceCount?.yes ?? 0 }}
</p>
<p class="text-xs text-secondary-500">
{{ totalResponses }} {{ totalResponses === 1 ? $t('events.response') : $t('events.responses') }}
</p>
</div>
</div>
</BaseCard>
</template>
<script setup lang="ts">
/**
* EventCard
* @description Composite component displaying event details with optional attendance count
* Uses BaseCard and BaseBadge components
*/
import type { Event, AttendanceCount } from '~/types'
interface Props {
/** Event data to display */
event: Event
/** Optional attendance count summary */
attendanceCount?: AttendanceCount
}
const props = defineProps<Props>()
const emit = defineEmits<{
/** Emitted when card is clicked */
click: [event: Event]
}>()
/**
* Computed property to check if attendance should be shown
*/
const showAttendance = computed((): boolean => {
return props.attendanceCount !== undefined
})
/**
* Total number of responses
*/
const totalResponses = computed((): number => {
if (!props.attendanceCount) return 0
return (
props.attendanceCount.yes +
props.attendanceCount.no +
props.attendanceCount.maybe
)
})
/**
* Human-readable event type label
*/
const { t } = useI18n()
const localePath = useLocalePath()
const eventTypeLabel = computed((): string => {
return props.event.type === 'practice' ? t('eventTypes.practice') : t('eventTypes.game')
})
/**
* Formatted date string
*/
const formattedDate = computed((): string => {
const date = new Date(props.event.dateTime)
return date.toLocaleDateString('en-US', {
weekday: 'short',
month: 'short',
day: 'numeric'
})
})
/**
* Formatted time string
*/
const formattedTime = computed((): string => {
const date = new Date(props.event.dateTime)
return date.toLocaleTimeString('en-US', {
hour: 'numeric',
minute: '2-digit'
})
})
/**
* Handle card click - navigate to event detail
*/
const handleClick = (): void => {
emit('click', props.event)
navigateTo(localePath(`/events/${props.event.id}`))
}
</script>
|