74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<div class="event-list">
|
|
<div class="filter-bar">
|
|
<h3 class="h4">Upcoming Events</h3>
|
|
|
|
<div class="filters">
|
|
<btn
|
|
:class="{ active: filter === 'current' }"
|
|
@click="onFilterClick('current')"
|
|
>Current</btn
|
|
>
|
|
<btn
|
|
:class="{ active: filter === 'past' }"
|
|
@click="onFilterClick('past')"
|
|
>Past</btn
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<event-list-item
|
|
v-for="event in filteredEvents"
|
|
:event="event"
|
|
@hover="(e) => emit('eventHover', e)"
|
|
@blur="(e) => emit('eventBlur', e)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({ events: Array })
|
|
const emit = defineEmits(['eventHover', 'eventBlur'])
|
|
|
|
const { filter, filteredEvents } = useFilteredEvents(props.events)
|
|
|
|
const onFilterClick = (label) => {
|
|
navigateTo({
|
|
query: {
|
|
filter: label,
|
|
},
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.event-list {
|
|
margin-top: desktop-vw(78px);
|
|
|
|
.filter-bar {
|
|
padding: desktop-vw(20px) var(--layout-margin);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.filters {
|
|
display: flex;
|
|
gap: desktop-vw(15px);
|
|
}
|
|
}
|
|
|
|
@include mobile {
|
|
margin-top: mobile-vw(75px);
|
|
|
|
.filter-bar {
|
|
padding: mobile-vw(20px) var(--layout-margin);
|
|
display: block;
|
|
|
|
.filters {
|
|
margin-top: mobile-vw(15px);
|
|
gap: mobile-vw(15px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|