refactor: restructure and improve quality

app/components/ApiModal.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+const baseApiUrl = useBaseApiUrl();
+const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
+</script>
+
+<template>
+  <UModal title="API Documentation">
+    <template #body>
+      <div class="flex flex-col space-y-8">
+        <p>
+          You can easily generate QRCodes by using the API, with no rate
+          limitation.
+          <br />
+          <br />
+          If you are not sure how to use the API, you can fill the QRCode form
+          and copy the generated API URL.
+        </p>
+
+        <div class="space-y-3">
+          <h2 class="font-bold text-lg">Base API URL</h2>
+
+          <UButtonGroup size="md" class="w-full">
+            <UInput
+              :model-value="baseApiUrl"
+              size="md"
+              class="w-full"
+              disabled
+              :ui="{ base: '!ps-12.5 !cursor-text font-mono' }"
+            >
+              <template #leading>
+                <span
+                  class="text-white dark:text-gray-900 bg-primary py-0.5 -mx-1 px-2 text-xs rounded-xs font-mono"
+                  ><span class="translate-y-px inline-block">GET</span></span
+                >
+              </template>
+            </UInput>
+            <UButton
+              color="neutral"
+              variant="subtle"
+              :icon="baseApiUrlIcon"
+              @click="copyBaseApiUrl"
+            />
+          </UButtonGroup>
+        </div>
+
+        <div class="space-y-3">
+          <h2 class="font-bold text-lg">Query parameters</h2>
+          <div
+            class="text-sm flex flex-col space-y-4 font-mono divide-y divide-gray-200 dark:divide-gray-800"
+          >
+            <div class="pt-1 pb-4 flex justify-between gap-x-5">
+              <span class="text-primary font-semibold">format</span>
+              <span class="text-slate-700 dark:text-slate-200 text-right">{{
+                arrayToUnion(IMAGE_FORMATS)
+              }}</span>
+            </div>
+
+            <div class="flex pb-4 justify-between gap-x-5">
+              <span class="text-primary font-semibold">logo</span>
+              <span class="text-slate-700 dark:text-slate-200 text-right">{{
+                arrayToUnion(LOGOS)
+              }}</span>
+            </div>
+
+            <div class="flex justify-between gap-x-5">
+              <span class="text-primary font-semibold">content</span>
+              <span class="text-slate-700 dark:text-slate-200 text-right"
+                >string</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>