feat(ui): api docs

app.vue

@@ -13,6 +13,8 @@ const copyImageLabel = ref("Copy");
 const isQRCodeEmpty = computed(() => !qrCode.value);
 const qrCodeSrc = computed(() => qrCode.value ?? "/default.webp");
 
+const isApiModelOpen = ref(false);
+
 const state = reactive({
   logo: undefined,
   format: IMAGE_FORMATS[0],
@@ -92,6 +94,9 @@ const copyQRCode = async () => {
 const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 
 const upperCase = (str: string) => str.toUpperCase();
+
+const arrayToUnion = (array: string[]) =>
+  array.map((x) => `"${x}"`).join(" | ");
 </script>
 
 <template>
@@ -118,16 +123,16 @@ const upperCase = (str: string) => str.toUpperCase();
               @input="updateQRCode"
             >
               <UInput
-                icon="i-heroicons-user"
                 v-model="state.content"
+                icon="i-heroicons-user"
                 placeholder="Your username or profile link"
               />
             </UFormGroup>
 
             <UFormGroup label="Logo" name="logo">
               <USelectMenu
-                icon="i-heroicons-photo"
                 v-model="state.logo"
+                icon="i-heroicons-photo"
                 :options="LOGOS"
                 placeholder="Select logo"
                 searchable
@@ -145,8 +150,8 @@ const upperCase = (str: string) => str.toUpperCase();
 
             <UFormGroup label="Format" name="format">
               <USelectMenu
-                icon="i-heroicons-document-duplicate"
                 v-model="state.format"
+                icon="i-heroicons-document-duplicate"
                 :options="IMAGE_FORMATS"
                 placeholder="Select format"
                 @change="updateQRCode"
@@ -162,6 +167,16 @@ const upperCase = (str: string) => str.toUpperCase();
             </UFormGroup>
 
             <UFormGroup label="API">
+              <template #hint>
+                <UButton
+                  size="md"
+                  color="gray"
+                  variant="link"
+                  icon="i-heroicons-question-mark-circle"
+                  @click="isApiModelOpen = true"
+                />
+              </template>
+
               <UButtonGroup size="sm" orientation="horizontal" class="w-full">
                 <UInput
                   v-model="apiUrl"
@@ -170,6 +185,7 @@ const upperCase = (str: string) => str.toUpperCase();
                   class="w-full"
                 />
                 <UButton
+                  color="gray"
                   :disabled="isQRCodeEmpty"
                   :icon="copyUrlIcon"
                   @click="copyUrl"
@@ -208,5 +224,88 @@ const upperCase = (str: string) => str.toUpperCase();
         </div>
       </div>
     </div>
+
+    <UModal v-model="isApiModelOpen">
+      <UCard
+        :ui="{
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3
+              class="text-xl font-semibold leading-6 text-gray-900 dark:text-white"
+            >
+              API Documentation
+            </h3>
+            <UButton
+              color="gray"
+              variant="ghost"
+              icon="i-heroicons-x-mark-20-solid"
+              class="-my-1"
+              @click="isApiModelOpen = false"
+            />
+          </div>
+        </template>
+
+        <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>
+            <UInput
+              model-value="https://simple-qr.com/api"
+              size="sm"
+              class="w-full"
+              disabled
+              :ui="{ base: '!ps-12 !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-sm"
+                  >GET</span
+                >
+              </template>
+            </UInput>
+          </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 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="pt-4 flex 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="pt-4 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>
+      </UCard>
+    </UModal>
   </div>
 </template>