94 lines
2.5 KiB
Vue
94 lines
2.5 KiB
Vue
<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>
|