improve

2024-12-06 14:42:03 +02:00
parent 9c69812258
commit 2a1ab52235
9 changed files with 202 additions and 128 deletions
@@ -1,48 +1,75 @@
 <template>
-  <div class="p-6">
-    <h1 class="text-2xl font-bold mb-4 text-center">Управление QR-кодами</h1>
-    <QueryRender :query="query">
-      <template #default="{ data }">
-        <div v-if="data.rows.length > 0" class="flex flex-col gap-5">
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <QRCodeCard v-for="{ doc: qrCode } in data.rows" :key="qrCode!.uri" :qrCode="qrCode!" />
-          </div>
-          <div class="text-center">
-            <Button
-              icon="pi pi-qrcode"
-              label="Создать QR‑код"
-              to="/create"
-              as="router-link"
-              class="p-button-outlined p-button-sm"
-            />
-          </div>
-        </div>
-        <div v-else class="text-center text-gray-500">
-          <p class="mb-6">Нет созданных QR-кодов. Вы можете создать их прямо сейчас!</p>
-          <Button
-            icon="pi pi-qrcode"
-            label="Создать QR‑код"
-            to="/create"
-            as="router-link"
-            class="p-button-lg"
-          />
-        </div>
-      </template>
+  <MetaHead>
+    <title>Ваши QR-коды — НаСвязи</title>
+    <meta
+      name="description"
+      content="Просматривайте и управляйте сообщениями, отправленными через ваш QR-код. Полная конфиденциальность и удобный интерфейс чата"
+    />
+  </MetaHead>

-      <template #error="{ reload }">
-        <div class="text-center text-red-500">
-          <p>Произошла ошибка при загрузке данных. Пожалуйста, попробуйте позже.</p>
-          <Button label="Повторить попытку" class="p-button mt-4" @click="reload()" />
-        </div>
-      </template>
+  <div class="flex flex-col min-h-full">
+    <main class="flex-grow flex justify-center py-6 px-4 md:px-6">
+      <div>
+        <h1 class="text-2xl font-bold mb-4 text-center lg:text-left">Управление QR-кодами</h1>
+        <QueryRender :query="query">
+          <template #default="{ data }">
+            <div v-if="data.rows.length > 0" class="flex flex-col gap-5">
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <QRCodeCard
+                  v-for="{ doc: qrCode } in data.rows"
+                  :key="qrCode!.uri"
+                  :qrCode="qrCode!"
+                />
+              </div>
+              <div class="text-center">
+                <Button
+                  icon="pi pi-qrcode"
+                  label="Создать QR‑код"
+                  to="/create"
+                  as="router-link"
+                  class="p-button-outlined p-button-sm"
+                />
+              </div>
+            </div>
+            <div v-else class="text-center text-gray-500">
+              <p class="mb-6">Нет созданных QR-кодов. Вы можете создать их прямо сейчас!</p>
+              <Button
+                icon="pi pi-qrcode"
+                label="Создать QR‑код"
+                to="/create"
+                as="router-link"
+                class="p-button-lg"
+              />
+            </div>
+          </template>

-      <template #loading>
-        <div class="text-center text-gray-500">
-          <p>Загрузка QR-кодов...</p>
-          <ProgressSpinner styleClass="mt-4" />
-        </div>
-      </template>
-    </QueryRender>
+          <template #error="{ reload }">
+            <div class="text-center text-red-500">
+              <p>Произошла ошибка при загрузке данных. Пожалуйста, попробуйте позже.</p>
+              <Button label="Повторить попытку" class="p-button mt-4" @click="reload()" />
+            </div>
+          </template>
+
+          <template #loading>
+            <div class="text-center text-gray-500">
+              <p>Загрузка QR-кодов...</p>
+              <ProgressSpinner styleClass="mt-4" />
+            </div>
+          </template>
+        </QueryRender>
+      </div>
+    </main>
+    <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">
+      <p>
+        Нужен еще один?
+        <a href="/create" class="underline">Создайте QR‑код</a>.
+      </p>
+      <p class="mt-1">
+        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/donate" class="underline"
+          >поддержке</a
+        >.
+      </p>
+    </footer>
  </div>
 </template>