refactor(events): Improve error handling and UI text styling

- Enhance error handling in useEvents composable with computed error message
- Add text-foreground class to improve event card text visibility
- Update Button variant and size for better visual consistency
- Refactor event card text styling to use foreground color classes

src/composables/useEvents.ts

@@ -4,7 +4,7 @@ import type { Event } from '@/lib/types/event'
 import { fetchEvents } from '@/lib/api/events'
 
 export function useEvents() {
-  const { state: events, isLoading, error, execute: refresh } = useAsyncState(
+  const { state: events, isLoading, error: asyncError, execute: refresh } = useAsyncState(
     fetchEvents,
     [] as Event[],
     {
@@ -13,6 +13,17 @@ export function useEvents() {
     }
   )
 
+  const error = computed(() => {
+    if (asyncError.value) {
+      return {
+        message: asyncError.value instanceof Error 
+          ? asyncError.value.message 
+          : 'An error occurred while fetching events'
+      }
+    }
+    return null
+  })
+
   const sortedEvents = computed(() => {
     return [...events.value].sort((a, b) => 
       new Date(b.time).getTime() - new Date(a.time).getTime()