feat(ui): copy base api url button

app.vue

@@ -6,6 +6,7 @@ const form = ref(null);
 const qrCode = ref(undefined);
 
 const copyUrlIcon = ref("i-heroicons-clipboard-document");
+const copyBaseApiUrlIcon = ref("i-heroicons-clipboard-document");
 const copyImageIcon = ref("i-heroicons-clipboard-document");
 const copyImageLabel = ref("Copy");
 
@@ -35,7 +36,7 @@ const isValidState = computed(
     state.format,
 );
 
-const BASE_API_URL = "http://localhost:3000/api";
+const BASE_API_URL = "https://simple-qr.com/api";
 
 const apiUrl = computed(() => {
   if (!isValidState.value) return "";
@@ -71,6 +72,15 @@ const copyUrl = async () => {
   }, 3000);
 };
 
+const copyBaseApiUrl = async () => {
+  await navigator.clipboard.writeText(BASE_API_URL);
+
+  copyBaseApiUrlIcon.value = "i-heroicons-clipboard-document-check";
+  setTimeout(() => {
+    copyBaseApiUrlIcon.value = "i-heroicons-clipboard-document";
+  }, 3000);
+};
+
 const downloadQRCode = () => {
   const link = document.createElement("a");
   link.href = qrCode.value;
@@ -120,7 +130,7 @@ const arrayToUnion = (array: string[]) =>
         Simple QRCode Generator
       </h1>
       <div class="flex justify-between space-x-8">
-        <img :src="qrCodeSrc" class="max-h-[375px] aspect-square" />
+        <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">
@@ -276,16 +286,18 @@ const arrayToUnion = (array: string[]) =>
           <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>
 
           <div class="space-y-3">
             <h2 class="font-bold text-lg">Base API URL</h2>
+
+            <UButtonGroup size="sm" orientation="horizontal" class="w-full">
               <UInput
-              model-value="https://simple-qr.com/api"
+                :model-value="BASE_API_URL"
                 size="sm"
                 class="w-full"
                 disabled
@@ -298,6 +310,12 @@ const arrayToUnion = (array: string[]) =>
                   >
                 </template>
               </UInput>
+              <UButton
+                color="gray"
+                :icon="copyBaseApiUrlIcon"
+                @click="copyBaseApiUrl"
+              />
+            </UButtonGroup>
           </div>
 
           <div class="space-y-3">