From cf9c5f02f65ec34d3f9580bc80ce306a1c7c66ac Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Wed, 2 Oct 2024 16:41:04 +0200
Subject: [PATCH] feat(ui): add title

---
 app.vue | 136 ++++++++++++++++++++------------------------------------
 1 file changed, 47 insertions(+), 89 deletions(-)

diff --git a/app.vue b/app.vue
index 1d66bb7..22b6019 100644
--- a/app.vue
+++ b/app.vue
@@ -99,103 +99,61 @@ const upperCase = (str: string) => str.toUpperCase();
     <NuxtRouteAnnouncer />
     <canvas ref="canvas" class="hidden" />
 
-    <div
-      class="w-full h-full max-w-[850px] max-h-[375px] flex justify-between space-x-10"
-    >
-      <img :src="qrCodeSrc" class="h-full aspect-square" />
+    <div class="p-5 w-full max-w-[850px] flex flex-col justify-center space-y-3">
+      <h1 class="text-4xl font-bold text-gray-700 dark:text-gray-200 border-b border-gray-700">
+        Simple QRCode Generator
+      </h1>
+      <div class="flex justify-between space-x-8">
+        <img :src="qrCodeSrc" class="max-h-[375px] aspect-square" />
 
-      <div class="flex-1 flex flex-col justify-center">
-        <UForm ref="form" :state="state" class="space-y-4">
-          <UFormGroup
-            label="Username or link"
-            name="content"
-            @input="updateQRCode"
-          >
-            <UInput
-              v-model="state.content"
-              placeholder="Your username or profile link"
-            />
-          </UFormGroup>
+        <div class="flex-1 flex flex-col justify-center">
+          <UForm ref="form" :state="state" class="space-y-4">
+            <UFormGroup label="Username or link" name="content" @input="updateQRCode">
+              <UInput v-model="state.content" placeholder="Your username or profile link" />
+            </UFormGroup>
 
-          <UFormGroup label="Logo" name="logo">
-            <USelectMenu
-              v-model="state.logo"
-              :options="LOGOS"
-              placeholder="Select logo"
-              searchable
-              @change="updateQRCode"
-            >
-              <template #label>
-                <span v-if="state.logo">{{ capitalize(state.logo) }}</span>
-              </template>
+            <UFormGroup label="Logo" name="logo">
+              <USelectMenu v-model="state.logo" :options="LOGOS" placeholder="Select logo" searchable
+                @change="updateQRCode">
+                <template #label>
+                  <span v-if="state.logo">{{ capitalize(state.logo) }}</span>
+                </template>
 
-              <template #option="props">
-                <span>{{ capitalize(props.option) }}</span>
-              </template>
-            </USelectMenu>
-          </UFormGroup>
+                <template #option="props">
+                  <span>{{ capitalize(props.option) }}</span>
+                </template>
+              </USelectMenu>
+            </UFormGroup>
 
-          <UFormGroup label="Format" name="format">
-            <USelectMenu
-              v-model="state.format"
-              :options="IMAGE_FORMATS"
-              placeholder="Select format"
-              @change="updateQRCode"
-            >
-              <template #label>
-                <span v-if="state.format">{{ upperCase(state.format) }}</span>
-              </template>
+            <UFormGroup label="Format" name="format">
+              <USelectMenu v-model="state.format" :options="IMAGE_FORMATS" placeholder="Select format"
+                @change="updateQRCode">
+                <template #label>
+                  <span v-if="state.format">{{ upperCase(state.format) }}</span>
+                </template>
 
-              <template #option="props">
-                <span>{{ upperCase(props.option) }}</span>
-              </template>
-            </USelectMenu>
-          </UFormGroup>
+                <template #option="props">
+                  <span>{{ upperCase(props.option) }}</span>
+                </template>
+              </USelectMenu>
+            </UFormGroup>
 
-          <UFormGroup label="API">
-            <UButtonGroup size="sm" orientation="horizontal" class="w-full">
-              <UInput
-                v-model="apiUrl"
-                disabled
-                placeholder="Please fill all fields first"
-                class="w-full"
-              />
-              <UButton
-                :disabled="isQRCodeEmpty"
-                :icon="copyUrlIcon"
-                @click="copyUrl"
-              />
-            </UButtonGroup>
-          </UFormGroup>
+            <UFormGroup label="API">
+              <UButtonGroup size="sm" orientation="horizontal" class="w-full">
+                <UInput v-model="apiUrl" disabled placeholder="Please fill all fields first" class="w-full" />
+                <UButton :disabled="isQRCodeEmpty" :icon="copyUrlIcon" @click="copyUrl" />
+              </UButtonGroup>
+            </UFormGroup>
 
-          <div class="flex space-x-4 pt-2">
-            <UButton
-              class="flex-1"
-              block
-              :icon="copyImageIcon"
-              size="md"
-              color="primary"
-              variant="solid"
-              :label="copyImageLabel"
-              :trailing="false"
-              :disabled="isQRCodeEmpty"
-              @click="copyQRCode"
-            />
+            <div class="flex space-x-4 pt-2">
+              <UButton class="flex-1" block :icon="copyImageIcon" size="md" color="primary" variant="solid"
+                :label="copyImageLabel" :trailing="false" :disabled="isQRCodeEmpty" @click="copyQRCode" />
 
-            <UButton
-              class="flex-1"
-              block
-              icon="i-heroicons-arrow-down-tray"
-              size="md"
-              color="primary"
-              variant="solid"
-              label="Download"
-              :trailing="false"
-              :disabled="isQRCodeEmpty"
-              @click="downloadQRCode"
-            />
-          </div>
-        </UForm>
+              <UButton class="flex-1" block icon="i-heroicons-arrow-down-tray" size="md" color="primary" variant="solid"
+                label="Download" :trailing="false" :disabled="isQRCodeEmpty" @click="downloadQRCode" />
+            </div>
+          </UForm>
+        </div>
       </div>
     </div>
   </div>