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()

src/pages/events.vue

@@ -17,8 +17,8 @@ function formatDate(dateStr: string) {
 <template>
   <div class="container mx-auto py-8 px-4">
     <div class="flex justify-between items-center mb-6">
-      <h1 class="text-3xl font-bold">Events</h1>
+      <h1 class="text-3xl font-bold text-foreground">Events</h1>
-      <Button variant="outline" @click="refresh" :disabled="isLoading">
+      <Button variant="secondary" size="sm" @click="refresh" :disabled="isLoading">
         <i-heroicons-arrow-path class="w-4 h-4 mr-2" :class="{ 'animate-spin': isLoading }" />
         Refresh
       </Button>
@@ -39,31 +39,31 @@ function formatDate(dateStr: string) {
           <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
             <Card v-for="event in upcomingEvents" :key="event.id" class="flex flex-col">
               <CardHeader>
-                <CardTitle>{{ event.name }}</CardTitle>
+                <CardTitle class="text-foreground">{{ event.name }}</CardTitle>
                 <CardDescription>{{ event.info }}</CardDescription>
               </CardHeader>
               <CardContent class="flex-grow">
                 <div class="space-y-2">
                   <div class="flex justify-between">
                     <span class="text-muted-foreground">Start Date:</span>
-                    <span>{{ formatDate(event.event_start_date) }}</span>
+                    <span class="text-foreground">{{ formatDate(event.event_start_date) }}</span>
                   </div>
                   <div class="flex justify-between">
                     <span class="text-muted-foreground">End Date:</span>
-                    <span>{{ formatDate(event.event_end_date) }}</span>
+                    <span class="text-foreground">{{ formatDate(event.event_end_date) }}</span>
                   </div>
                   <div class="flex justify-between">
                     <span class="text-muted-foreground">Tickets Available:</span>
-                    <span>{{ event.amount_tickets - event.sold }}</span>
+                    <span class="text-foreground">{{ event.amount_tickets - event.sold }}</span>
                   </div>
                   <div class="flex justify-between">
                     <span class="text-muted-foreground">Price:</span>
-                    <span>{{ event.price_per_ticket }} {{ event.currency }}</span>
+                    <span class="text-foreground">{{ event.price_per_ticket }} {{ event.currency }}</span>
                   </div>
                 </div>
               </CardContent>
               <CardFooter>
-                <Button class="w-full" :disabled="event.amount_tickets <= event.sold">
+                <Button class="w-full" variant="default" :disabled="event.amount_tickets <= event.sold">
                   Buy Ticket
                 </Button>
               </CardFooter>
@@ -80,26 +80,26 @@ function formatDate(dateStr: string) {
           <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
             <Card v-for="event in pastEvents" :key="event.id" class="flex flex-col opacity-75">
               <CardHeader>
-                <CardTitle>{{ event.name }}</CardTitle>
+                <CardTitle class="text-foreground">{{ event.name }}</CardTitle>
                 <CardDescription>{{ event.info }}</CardDescription>
               </CardHeader>
               <CardContent class="flex-grow">
                 <div class="space-y-2">
                   <div class="flex justify-between">
                     <span class="text-muted-foreground">Start Date:</span>
-                    <span>{{ formatDate(event.event_start_date) }}</span>
+                    <span class="text-foreground">{{ formatDate(event.event_start_date) }}</span>
                   </div>
                   <div class="flex justify-between">
                     <span class="text-muted-foreground">End Date:</span>
-                    <span>{{ formatDate(event.event_end_date) }}</span>
+                    <span class="text-foreground">{{ formatDate(event.event_end_date) }}</span>
                   </div>
                   <div class="flex justify-between">
                     <span class="text-muted-foreground">Total Tickets:</span>
-                    <span>{{ event.amount_tickets }}</span>
+                    <span class="text-foreground">{{ event.amount_tickets }}</span>
                   </div>
                   <div class="flex justify-between">
                     <span class="text-muted-foreground">Tickets Sold:</span>
-                    <span>{{ event.sold }}</span>
+                    <span class="text-foreground">{{ event.sold }}</span>
                   </div>
                 </div>
               </CardContent>