feat(events): Add comprehensive events management with dynamic fetching and UI

- Integrate Reka UI Tabs component for event browsing
- Create useEvents composable for event data management
- Implement events API integration with error handling
- Add events page with upcoming and past events sections
- Configure environment variables for API connection
- Add internationalization support for events navigation

src/composables/useEvents.ts

@@ -0,0 +1,44 @@
+import { ref, computed } from 'vue'
+import { useAsyncState } from '@vueuse/core'
+import type { Event } from '@/lib/types/event'
+import { fetchEvents } from '@/lib/api/events'
+
+export function useEvents() {
+  const { state: events, isLoading, error, execute: refresh } = useAsyncState(
+    fetchEvents,
+    [] as Event[],
+    {
+      immediate: true,
+      resetOnExecute: false,
+    }
+  )
+
+  const sortedEvents = computed(() => {
+    return [...events.value].sort((a, b) => 
+      new Date(b.time).getTime() - new Date(a.time).getTime()
+    )
+  })
+
+  const upcomingEvents = computed(() => {
+    const now = new Date()
+    return sortedEvents.value.filter(event => 
+      new Date(event.event_start_date) > now
+    )
+  })
+
+  const pastEvents = computed(() => {
+    const now = new Date()
+    return sortedEvents.value.filter(event => 
+      new Date(event.event_end_date) < now
+    )
+  })
+
+  return {
+    events: sortedEvents,
+    upcomingEvents,
+    pastEvents,
+    isLoading,
+    error,
+    refresh,
+  }
+}