Add event series badge component

app/pages/events/index.vue

@@ -57,16 +57,14 @@
                     {{ event.content }}
                   </p>
 
-                  <div
-                    v-if="event.series?.isSeriesEvent"
-                    class="flex items-center gap-1 text-xs text-purple-600 dark:text-purple-400"
-                  >
-                    <div
-                      class="w-4 h-4 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center text-xs font-bold"
-                    >
-                      {{ event.series.position }}
-                    </div>
-                    {{ event.series.title }}
+                  <div v-if="event.series?.isSeriesEvent" class="mt-2">
+                    <EventSeriesBadge
+                      :title="event.series.title"
+                      :description="event.series.description"
+                      :position="event.series.position"
+                      :total-events="event.series.totalEvents"
+                      :series-id="event.series.id"
+                    />
                   </div>
                 </div>
 
@@ -142,62 +140,20 @@
         v-for="series in activeSeries.slice(0, 6)"
         :key="series.id"
         :to="`/series/${series.id}`"
-        class="block bg-ghost-900 rounded-xl p-6 shadow-lg border border-ghost-700 hover:border-purple-500 hover:shadow-xl transition-all duration-300"
+        class="block bg-gradient-to-r from-purple-500/10 to-blue-500/10 rounded-xl p-6 border border-purple-500/30 hover:border-purple-500/50 hover:from-purple-500/15 hover:to-blue-500/15 transition-all duration-300"
       >
         <div class="flex items-start justify-between mb-4">
-          <div
-            :class="[
-              'inline-flex items-center px-3 py-1 rounded-full text-xs font-medium',
-              getSeriesTypeBadgeClass(series.type),
-            ]"
-          >
-            {{ formatSeriesType(series.type) }}
-          </div>
-          <div class="flex items-center gap-1 text-xs text-ghost-400">
-            <Icon name="heroicons:calendar-days" class="w-4 h-4" />
-            <span>{{ series.eventCount }} events</span>
-          </div>
-        </div>
-
-        <h3
-          class="text-lg font-semibold text-ghost-100 mb-2 hover:text-purple-400 transition-colors"
-        >
-          {{ series.title }}
-        </h3>
-
-        <p class="text-sm text-ghost-300 mb-4 line-clamp-2">
-          {{ series.description }}
-        </p>
-
-        <div class="space-y-2 mb-4">
-          <div
-            v-for="(event, index) in series.events.slice(0, 3)"
-            :key="event.id"
-            class="flex items-center justify-between text-xs"
-          >
-            <div class="flex items-center gap-2">
-              <div
-                class="w-6 h-6 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full flex items-center justify-center text-xs font-medium"
-              >
-                {{ event.series?.position || index + 1 }}
-              </div>
-              <span class="text-ghost-300 truncate">{{ event.title }}</span>
-            </div>
-            <span class="text-ghost-400">
-              {{ formatEventDate(event.startDate) }}
+          <div class="flex items-center gap-2">
+            <span
+              class="text-sm font-semibold text-purple-700 dark:text-purple-300"
+            >
+              Event Series
+            </span>
+            <span
+              class="inline-flex items-center px-2 py-0.5 rounded-md bg-purple-500/20 text-sm font-medium text-purple-700 dark:text-purple-300"
+            >
+              {{ series.eventCount }} events
             </span>
-          </div>
-          <div
-            v-if="series.events.length > 3"
-            class="text-xs text-ghost-400 text-center pt-1"
-          >
-            +{{ series.events.length - 3 }} more events
-          </div>
-        </div>
-
-        <div class="flex items-center justify-between text-sm">
-          <div class="text-ghost-400">
-            {{ formatDateRange(series.startDate, series.endDate) }}
           </div>
           <span
             :class="[
@@ -212,6 +168,50 @@
             {{ series.status }}
           </span>
         </div>
+
+        <h3
+          class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2"
+        >
+          {{ series.title }}
+        </h3>
+
+        <p
+          class="text-sm text-purple-600 dark:text-purple-400 mb-4 line-clamp-2"
+        >
+          {{ series.description }}
+        </p>
+
+        <div class="space-y-2 mb-4">
+          <div
+            v-for="(event, index) in series.events.slice(0, 3)"
+            :key="event.id"
+            class="flex items-center justify-between text-xs"
+          >
+            <div class="flex items-center gap-2">
+              <div
+                class="w-6 h-6 bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded-full flex items-center justify-center text-xs font-medium border border-purple-500/30"
+              >
+                {{ event.series?.position || index + 1 }}
+              </div>
+              <span class="text-purple-700 dark:text-purple-300 truncate">{{
+                event.title
+              }}</span>
+            </div>
+            <span class="text-purple-600 dark:text-purple-400">
+              {{ formatEventDate(event.startDate) }}
+            </span>
+          </div>
+          <div
+            v-if="series.events.length > 3"
+            class="text-xs text-purple-600 dark:text-purple-400 text-center pt-1"
+          >
+            +{{ series.events.length - 3 }} more events
+          </div>
+        </div>
+
+        <div class="text-sm text-purple-600 dark:text-purple-400">
+          {{ formatDateRange(series.startDate, series.endDate) }}
+        </div>
       </NuxtLink>
     </div>