107 lines
3.9 KiB
Vue
107 lines
3.9 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-50">
|
|
<header class="bg-white shadow-sm">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div class="flex items-center justify-between">
|
|
<NuxtLink to="/" class="flex items-center space-x-4 hover:opacity-80">
|
|
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
|
|
</NuxtLink>
|
|
<QRCodeButton v-if="sermon" :sermon="sermon" />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div v-if="sermon" class="bg-white shadow-lg rounded-lg p-8">
|
|
<!-- Header -->
|
|
<div class="border-b pb-6 mb-8">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-2">{{ sermon.title }}</h1>
|
|
<p class="text-lg text-gray-600">{{ formatDate(sermon.date) }}</p>
|
|
</div>
|
|
|
|
<!-- Section 1: Bible References -->
|
|
<section class="mb-8">
|
|
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Bible References</h2>
|
|
<div class="bg-blue-50 rounded-lg p-6">
|
|
<ul class="space-y-2">
|
|
<li
|
|
v-for="(ref, index) in bibleReferences"
|
|
:key="index"
|
|
class="text-gray-800 flex items-start"
|
|
>
|
|
<span class="text-blue-600 mr-2">•</span>
|
|
<span>{{ ref }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 2: Personal Appliance -->
|
|
<section class="mb-8">
|
|
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Personal Appliance</h2>
|
|
<div class="bg-green-50 rounded-lg p-6">
|
|
<p class="text-gray-800 whitespace-pre-wrap">{{ sermon.personal_appliance }}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: Pastor's Challenge -->
|
|
<section class="mb-8">
|
|
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Pastor's Challenge</h2>
|
|
<div class="bg-purple-50 rounded-lg p-6">
|
|
<p class="text-gray-800 whitespace-pre-wrap">{{ sermon.pastors_challenge }}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Back Button -->
|
|
<div class="border-t pt-6">
|
|
<NuxtLink
|
|
to="/"
|
|
class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
|
|
>
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Back to All Sermons
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div v-else class="bg-white shadow-lg rounded-lg p-8 text-center">
|
|
<h2 class="text-2xl font-semibold text-gray-900 mb-4">Sermon Not Found</h2>
|
|
<p class="text-gray-600 mb-6">The sermon you're looking for doesn't exist.</p>
|
|
<NuxtLink
|
|
to="/"
|
|
class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
|
|
>
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Back to All Sermons
|
|
</NuxtLink>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const slug = route.params.slug as string
|
|
|
|
const { data: sermon } = await useFetch(`/api/sermons/${slug}`)
|
|
|
|
const bibleReferences = computed(() => {
|
|
if (!sermon.value?.bible_references) return []
|
|
return sermon.value.bible_references.split('\n').filter((ref: string) => ref.trim())
|
|
})
|
|
|
|
function formatDate(dateString: string) {
|
|
const date = new Date(dateString)
|
|
return date.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})
|
|
}
|
|
</script>
|