Complete sermon management system with Nuxt 4, authentication, SQLite database, QR codes, and Docker deployment

components/SermonCard.vue

@@ -0,0 +1,93 @@
+<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>