feat: Restore admin.vue content with proper width constraints and add favicon

nuxt.config.ts

@@ -31,6 +31,7 @@ export default defineNuxtConfig({
   app: {
     head: {
       link: [
+        { rel: 'icon', type: 'image/png', href: '/logos/favicon.png' },
         {
           rel: 'preconnect',
           href: 'https://fonts.googleapis.com'

pages/admin.vue

@@ -25,8 +25,135 @@
       </div>
     </header>
 
-    <div class="py-8 w-96 mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="py-8 max-w-xl mx-auto px-4 sm:px-6 lg:px-8">
-      <p>Test content with fixed width</p>
+      <UCard :ui="{ base: 'mx-auto', sm: 'max-w-md' }">
+        <template #header>
+          <h2 class="text-xl font-semibold">Sermon Details</h2>
+        </template>
+
+        <form @submit.prevent="handleSubmit" class="space-y-8">
+          <!-- Basic Information -->
+          <div class="space-y-4">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <UFormGroup label="Sermon Title" name="title" required>
+                <UInput
+                  v-model="form.title"
+                  placeholder="Enter sermon title"
+                  :disabled="loading"
+                />
+              </UFormGroup>
+
+              <UFormGroup label="Sermon Date" name="date" required>
+                <UInput
+                  v-model="form.date"
+                  icon="i-heroicons-calendar-days-20-solid"
+                  type="date"
+                  :disabled="loading"
+                  variant="outline"
+                />
+              </UFormGroup>
+            </div>
+
+            <UFormGroup label="Generated URL" name="generatedUrl">
+              <UInput
+                :value="form.title && form.date ? generateSlug(form.title, form.date) : 'Enter title and date to see URL'"
+                :disabled="loading"
+                readonly
+                variant="outline"
+              />
+            </UFormGroup>
+          </div>
+
+          <UDivider />
+
+          <!-- Bible References -->
+          <UFormGroup label="Bible References" name="bibleReferences">
+            <div
+              v-for="(reference, index) in form.bibleReferences"
+              :key="index"
+              class="flex items-center gap-2 mb-2"
+            >
+              <UInput
+                v-model="form.bibleReferences[index]"
+                :placeholder="`Bible reference ${index + 1}`"
+                :disabled="loading"
+                class="flex-1"
+                variant="outline"
+              />
+              <UButton
+                @click="removeBibleReference(index)"
+                variant="ghost"
+                color="red"
+                icon="i-heroicons-minus"
+                :disabled="loading"
+                v-if="form.bibleReferences.length > 1"
+              />
+            </div>
+            <UButton
+              @click="addBibleReference"
+              variant="link"
+              color="primary"
+              icon="i-heroicons-plus"
+              :disabled="loading"
+              :padded="false"
+              class="-ml-1"
+            >
+              Add another reference
+            </UButton>
+          </UFormGroup>
+
+          <UDivider />
+
+          <!-- Personal Application -->
+          <UFormGroup label="Personal Application" name="personalApplication">
+            <UTextarea
+              v-model="form.personalApplication"
+              :rows="4"
+              placeholder="Describe how this sermon applies to daily life..."
+              :disabled="loading"
+              variant="outline"
+            />
+          </UFormGroup>
+
+          <UDivider />
+
+          <!-- Pastor's Challenge -->
+          <UFormGroup label="Pastor's Challenge" name="pastorChallenge">
+            <UTextarea
+              v-model="form.pastorChallenge"
+              :rows="4"
+              placeholder="What challenge does the pastor give to the congregation?"
+              :disabled="loading"
+              variant="outline"
+            />
+          </UFormGroup>
+
+          <!-- Submit -->
+          <div class="flex justify-end space-x-4">
+            <UButton
+              type="button"
+              variant="outline"
+              :disabled="loading"
+              @click="resetForm"
+            >
+              Reset
+            </UButton>
+            <UButton
+              type="submit"
+              variant="solid"
+              color="primary"
+              :loading="loading"
+            >
+              Create Sermon
+            </UButton>
+          </div>
+        </form>
+      </UCard>
+
+      <!-- Success Message -->
+      <div v-if="successMessage" class="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
+        <p class="text-green-800">{{ successMessage }}</p>
+      </div>
     </div>
   </div>
 </template>