Songs & dates

pages/[slug].vue

@@ -78,6 +78,23 @@
           </div>
         </section>
 
+        <!-- Worship Songs Section -->
+        <section v-if="worshipSongs.length > 0" class="mb-8">
+          <h2 class="text-2xl font-semibold text-gray-900 mb-4">Worship Songs</h2>
+          <div class="bg-yellow-50 rounded-lg p-6">
+            <ul class="space-y-3">
+              <li 
+                v-for="(song, index) in worshipSongs" 
+                :key="index"
+                :class="['text-gray-800', fontSizeClasses]"
+              >
+                <span class="font-semibold">{{ song.name }}</span>
+                <span v-if="song.artist" class="text-gray-600"> - {{ song.artist }}</span>
+              </li>
+            </ul>
+          </div>
+        </section>
+
         <!-- Back Button -->
         <div class="border-t pt-6">
           <NuxtLink 
@@ -132,6 +149,15 @@ const bibleReferences = computed(() => {
   }
 })
 
+const worshipSongs = computed(() => {
+  if (!sermon.value?.worship_songs) return []
+  try {
+    return JSON.parse(sermon.value.worship_songs)
+  } catch {
+    return []
+  }
+})
+
 // Font size classes
 const fontSizeClasses = computed(() => {
   switch (fontSize.value) {