132 lines
4.4 KiB
Vue
132 lines
4.4 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-50">
|
|
<!-- Header -->
|
|
<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">
|
|
<div class="flex items-center space-x-4">
|
|
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<ClientOnly fallback-tag="div">
|
|
<template v-if="isAuthenticated">
|
|
<NuxtLink
|
|
to="/admin"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm"
|
|
>
|
|
Create New Sermon
|
|
</NuxtLink>
|
|
<button
|
|
@click="handleLogout"
|
|
class="text-sm font-medium text-red-600 hover:text-red-700"
|
|
>
|
|
Logout
|
|
</button>
|
|
</template>
|
|
<NuxtLink
|
|
v-else
|
|
to="/login"
|
|
class="text-sm font-medium text-blue-600 hover:text-blue-700"
|
|
>
|
|
Admin Login
|
|
</NuxtLink>
|
|
<template #fallback>
|
|
<div class="h-10"></div>
|
|
</template>
|
|
</ClientOnly>
|
|
</div>
|
|
</div>
|
|
<div class="text-center mt-6">
|
|
<h1 class="text-3xl font-bold text-gray-900">
|
|
Welcome to New Life! Please choose the sermon you'd like to see.
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<!-- Recent Sermons (Last 3 months) -->
|
|
<div v-if="recentSermons.length > 0">
|
|
<h2 class="text-2xl font-semibold text-gray-900 mb-6">Recent Sermons</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
|
<SermonCard
|
|
v-for="sermon in recentSermons"
|
|
:key="sermon.id"
|
|
:sermon="sermon"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Older Sermons Dropdown -->
|
|
<div v-if="olderSermons.length > 0" class="mt-8">
|
|
<button
|
|
@click="showOlder = !showOlder"
|
|
class="w-full bg-white border border-gray-300 rounded-lg px-6 py-4 text-left hover:bg-gray-50 transition-colors flex items-center justify-between"
|
|
>
|
|
<span class="text-lg font-medium text-gray-900">View Older Sermons</span>
|
|
<svg
|
|
:class="['w-5 h-5 text-gray-500 transition-transform', showOlder ? 'rotate-180' : '']"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div v-if="showOlder" class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<SermonCard
|
|
v-for="sermon in olderSermons"
|
|
:key="sermon.id"
|
|
:sermon="sermon"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-if="recentSermons.length === 0 && olderSermons.length === 0" class="text-center py-12">
|
|
<p class="text-gray-500 text-lg">No sermons available yet.</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const showOlder = ref(false)
|
|
|
|
// Check authentication status
|
|
const { data: authData } = await useFetch('/api/auth/verify')
|
|
const isAuthenticated = computed(() => authData.value?.authenticated || false)
|
|
|
|
// Fetch all sermons
|
|
const { data: allSermons } = await useFetch('/api/sermons')
|
|
|
|
// Calculate date 3 months ago
|
|
const threeMonthsAgo = new Date()
|
|
threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3)
|
|
|
|
// Split sermons into recent and older
|
|
const recentSermons = computed(() => {
|
|
if (!allSermons.value) return []
|
|
return allSermons.value.filter((sermon: any) => {
|
|
const sermonDate = new Date(sermon.date)
|
|
return sermonDate >= threeMonthsAgo
|
|
})
|
|
})
|
|
|
|
const olderSermons = computed(() => {
|
|
if (!allSermons.value) return []
|
|
return allSermons.value.filter((sermon: any) => {
|
|
const sermonDate = new Date(sermon.date)
|
|
return sermonDate < threeMonthsAgo
|
|
})
|
|
})
|
|
|
|
async function handleLogout() {
|
|
await $fetch('/api/auth/logout', { method: 'POST' })
|
|
// Refresh the page to update authentication state
|
|
window.location.reload()
|
|
}
|
|
</script>
|