detail page port

components/event/list/Index.vue

@@ -0,0 +1,73 @@
+<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>