Add event series badge component

app/components/EventSeriesBadge.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="p-4 bg-gradient-to-r from-purple-500/10 to-blue-500/10 rounded-xl border border-purple-500/30"
+  >
+    <div class="flex items-start justify-between gap-6">
+      <div class="flex-1 min-w-0">
+        <div class="flex flex-wrap items-center gap-2 mb-2">
+          <span
+            class="text-sm font-semibold text-purple-700 dark:text-purple-300"
+          >
+            Part of a Series
+          </span>
+          <span
+            v-if="totalEvents"
+            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"
+          >
+            <template v-if="position">
+              Event {{ position }} of {{ totalEvents }}
+            </template>
+            <template v-else>
+              {{ totalEvents }} events in series
+            </template>
+          </span>
+        </div>
+        <h3
+          class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2"
+        >
+          {{ title }}
+        </h3>
+        <p
+          v-if="description"
+          class="text-sm text-purple-600 dark:text-purple-400"
+        >
+          {{ description }}
+        </p>
+      </div>
+      <div v-if="seriesId" class="flex-shrink-0 self-start">
+        <UButton
+          :to="`/series/${seriesId}`"
+          color="primary"
+          size="md"
+          label="View Series"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: "",
+  },
+  position: {
+    type: Number,
+    default: null,
+  },
+  totalEvents: {
+    type: Number,
+    default: null,
+  },
+  seriesId: {
+    type: String,
+    required: true,
+  },
+});
+</script>