46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
Vue
<template>
|
|
<div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">{{ sermon.title }}</h3>
|
|
<p class="text-sm text-gray-500 mb-4">{{ formatDate(sermon.date) }}</p>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<NuxtLink
|
|
:to="`/${sermon.slug}`"
|
|
class="text-blue-600 hover:text-blue-700 font-medium text-sm"
|
|
>
|
|
View Sermon →
|
|
</NuxtLink>
|
|
|
|
<QRCodeButton :sermon="sermon" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Sermon {
|
|
id?: number
|
|
slug: string
|
|
title: string
|
|
date: string
|
|
bible_references: string
|
|
personal_appliance: string
|
|
pastors_challenge: string
|
|
}
|
|
|
|
defineProps<{
|
|
sermon: Sermon
|
|
}>()
|
|
|
|
function formatDate(dateString: string) {
|
|
// Add T00:00:00 to ensure the date is interpreted as local time, not UTC
|
|
const date = new Date(dateString + 'T00:00:00')
|
|
return date.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})
|
|
}
|
|
</script>
|