feat: list logos from the api instead of hardcoding it

app/components/ApiModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const baseApiUrl = useBaseApiUrl();
 const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
+const { data: logos } = await useFetch<string[]>("/api/logos");
 </script>
 
 <template>
@@ -10,8 +11,8 @@ const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
         <p>
           You can easily generate QRCodes by using the API, with no rate
           limitation.
-          <br />
-          <br />
+          <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>
@@ -58,7 +59,7 @@ const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
             <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)
+                arrayToUnion(logos ?? [])
               }}</span>
             </div>