From 84c33320deac2a2047bde5cc9021e1ec909d82f4 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Wed, 1 Oct 2025 23:26:10 -0400
Subject: [PATCH] Reorganize QR code modal: show title and date above QR code
 for better clarity

---
 components/QRCodeModal.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/QRCodeModal.vue b/components/QRCodeModal.vue
index efbd215..d8763fd 100644
--- a/components/QRCodeModal.vue
+++ b/components/QRCodeModal.vue
@@ -14,10 +14,13 @@
       </div>
       
       <div class="flex flex-col items-center">
+        <div class="text-center mb-4">
+          <h4 class="text-lg font-semibold text-gray-900 mb-1">{{ sermon.title }}</h4>
+          <p class="text-sm text-gray-600">{{ formatDate(sermon.date) }}</p>
+        </div>
         <div class="bg-white p-4 rounded-lg border-2 border-gray-200">
           <canvas ref="qrCanvas"></canvas>
         </div>
-        <p class="mt-4 text-sm text-gray-600 text-center">{{ sermon.title }}</p>
       </div>
     </div>
   </div>
@@ -47,6 +50,15 @@ defineEmits<{
 const qrCanvas = ref<HTMLCanvasElement | null>(null)
 const config = useRuntimeConfig()
 
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', { 
+    year: 'numeric', 
+    month: '2-digit', 
+    day: '2-digit' 
+  })
+}
+
 onMounted(async () => {
   if (qrCanvas.value) {
     const url = `${config.public.siteUrl}/${props.sermon.slug}`