From 103e14dbc9edf9668f389a1e5ea740b30cf43cd5 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Wed, 1 Oct 2025 23:18:42 -0400
Subject: [PATCH] Add font size selector to sermon view page with Small,
 Medium, and Large options

---
 pages/[slug].vue | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/pages/[slug].vue b/pages/[slug].vue
index 1466599..a5ce628 100644
--- a/pages/[slug].vue
+++ b/pages/[slug].vue
@@ -6,7 +6,21 @@
           <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 class="flex items-center gap-4">
+            <div class="flex items-center gap-2">
+              <label for="font-size" class="text-sm font-medium text-gray-700">Font Size:</label>
+              <select
+                id="font-size"
+                v-model="fontSize"
+                class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm"
+              >
+                <option value="small">Small</option>
+                <option value="medium">Medium</option>
+                <option value="large">Large</option>
+              </select>
+            </div>
+            <QRCodeButton v-if="sermon" :sermon="sermon" />
+          </div>
         </div>
       </div>
     </header>
@@ -29,7 +43,7 @@
               class="bg-blue-50 rounded-lg p-6"
             >
               <div class="flex items-start justify-between gap-4">
-                <p class="text-gray-800 text-lg leading-relaxed flex-1">
+                <p :class="['text-gray-800 leading-relaxed flex-1', fontSizeClasses]">
                   {{ ref.text }}
                 </p>
                 <div class="text-right text-sm text-gray-600 whitespace-nowrap">
@@ -45,7 +59,7 @@
         <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>
+            <p :class="['text-gray-800 whitespace-pre-wrap', fontSizeClasses]">{{ sermon.personal_appliance }}</p>
           </div>
         </section>
 
@@ -53,7 +67,7 @@
         <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>
+            <p :class="['text-gray-800 whitespace-pre-wrap', fontSizeClasses]">{{ sermon.pastors_challenge }}</p>
           </div>
         </section>
 
@@ -95,6 +109,9 @@ const slug = route.params.slug as string
 
 const { data: sermon } = await useFetch(`/api/sermons/${slug}`)
 
+// Font size state
+const fontSize = ref('medium')
+
 const bibleReferences = computed(() => {
   if (!sermon.value?.bible_references) return []
   try {
@@ -108,6 +125,18 @@ const bibleReferences = computed(() => {
   }
 })
 
+// Font size classes
+const fontSizeClasses = computed(() => {
+  switch (fontSize.value) {
+    case 'small':
+      return 'text-sm'
+    case 'large':
+      return 'text-xl'
+    default:
+      return 'text-base'
+  }
+})
+
 function formatDate(dateString: string) {
   const date = new Date(dateString)
   return date.toLocaleDateString('en-US', {