Starting over

components/SermonCard.vue

@@ -1,93 +0,0 @@
-<template>
-  <UCard class="h-full flex flex-col hover:shadow-lg transition-shadow duration-200">
-    <template #header>
-      <div class="flex justify-between items-start">
-        <div class="flex-1">
-          <h3 class="text-lg font-semibold text-gray-900 line-clamp-2">
-            {{ sermon.title }}
-          </h3>
-          <p class="text-sm text-gray-600 mt-1">
-            {{ formatDate(sermon.date) }}
-          </p>
-        </div>
-        <div class="ml-2">
-          <QRCodeButton :url="sermonUrl" :title="sermon.title" @click="showQRModal = $event" />
-        </div>
-      </div>
-    </template>
-
-    <div class="flex-1">
-      <div v-if="sermon.bibleReferences && sermon.bibleReferences.length > 0" class="mb-4">
-        <h4 class="text-sm font-medium text-gray-700 mb-2">Bible References:</h4>
-        <div class="space-y-1">
-          <p
-            v-for="reference in sermon.bibleReferences.slice(0, 3)"
-            :key="reference"
-            class="text-sm text-gray-600 bg-gray-50 px-2 py-1 rounded"
-          >
-            {{ reference }}
-          </p>
-          <p
-            v-if="sermon.bibleReferences.length > 3"
-            class="text-sm text-gray-500 italic"
-          >
-            +{{ sermon.bibleReferences.length - 3 }} more references
-          </p>
-        </div>
-      </div>
-
-      <div v-if="sermon.personalApplication" class="mb-4">
-        <h4 class="text-sm font-medium text-gray-700 mb-2">Personal Application:</h4>
-        <p class="text-sm text-gray-600 line-clamp-3">
-          {{ sermon.personalApplication }}
-        </p>
-      </div>
-    </div>
-
-    <template #footer>
-      <UButton
-        @click="navigateTo(sermonUrl)"
-        variant="outline"
-        color="primary"
-        class="w-full"
-        :label="`View Sermon - ${sermon.slug.replace('sermon-', '').replace(/(\d{2})(\d{2})(\d{4})/, '$1/$2/$3')}`"
-      />
-    </template>
-
-    <!-- QR Code Modal -->
-    <QRCodeModal
-      v-model="showQRModal"
-      :url="sermonUrl"
-      :title="sermon.title"
-    />
-  </UCard>
-</template>
-
-<script setup lang="ts">
-import { format, parseISO } from 'date-fns'
-
-interface Sermon {
-  id: number
-  title: string
-  date: string
-  slug: string
-  bibleReferences?: string[]
-  personalApplication?: string
-  pastorChallenge?: string
-}
-
-const props = defineProps<{
-  sermon: Sermon
-}>()
-
-const showQRModal = ref(false)
-const sermonUrl = computed(() => `/${props.sermon.slug}`)
-
-const formatDate = (dateString: string) => {
-  try {
-    return format(parseISO(dateString), 'MMMM d, yyyy')
-  } catch {
-    return dateString
-  }
-}
-</script>