app/components/EventSeriesBadge.vue

@@ -1,81 +0,0 @@
-<template>
-  <div class="series-badge p-4">
-    <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="series-badge__label text-sm font-semibold">
-            Part of a Series
-          </span>
-          <span
-            v-if="totalEvents"
-            class="series-badge__count inline-flex items-center px-2 py-0.5 text-sm font-medium"
-          >
-            <template v-if="position">
-              Event {{ position }} of {{ totalEvents }}
-            </template>
-            <template v-else> {{ totalEvents }} events in series </template>
-          </span>
-        </div>
-        <h3 class="series-badge__title text-lg font-semibold mb-2">
-          {{ title }}
-        </h3>
-        <p v-if="description" class="series-badge__description text-sm">
-          {{ 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>
-
-<style scoped>
-.series-badge {
-  background: var(--surface);
-  border: 1px dashed var(--border);
-}
-.series-badge__label {
-  color: var(--text-dim);
-}
-.series-badge__count {
-  background: color-mix(in srgb, var(--candle) 12%, transparent);
-  color: var(--text);
-}
-.series-badge__title {
-  color: var(--text-bright);
-}
-.series-badge__description {
-  color: var(--text-dim);
-}
-</style>