feat(ui): github repo button

app.vue

@@ -142,6 +142,16 @@ const isDark = computed({
         <h1 class="text-4xl font-bold">Simple QRCode Generator</h1>
 
         <div class="flex gap-x-1">
+          <UButton
+            color="gray"
+            variant="ghost"
+            icon="i-uil-github"
+            aria-label="Github repo"
+            class="w-8 h-8"
+            target="_blank"
+            to="https://github.com/pihkaal/simple-qr"
+          />
+
           <ClientOnly>
             <UButton
               :icon="
@@ -165,7 +175,7 @@ const isDark = computed({
         <img
           :src="qrCodeSrc"
           class="max-h-[375px] aspect-square border border-gray-100 dark:border-gray-800"
-        />
+        >
 
         <div class="flex-1 flex flex-col justify-center">
           <UForm ref="form" :state="state" class="space-y-4">
@@ -321,8 +331,8 @@ const isDark = computed({
           <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>

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@iconify-json/heroicons": "^1.2.0",
+    "@iconify-json/uil": "^1.2.1",
     "@nuxt/eslint": "^0.5.7",
     "@nuxt/ui": "^2.18.6",
     "canvas": "^2.11.2",

pnpm-lock.yaml

@@ -10,6 +10,9 @@ importers:
       "@iconify-json/heroicons":
         specifier: ^1.2.0
         version: 1.2.0
+      "@iconify-json/uil":
+        specifier: ^1.2.1
+        version: 1.2.1
       "@nuxt/eslint":
         specifier: ^0.5.7
         version: 0.5.7(eslint@9.11.1(jiti@2.0.0))(magicast@0.3.5)(rollup@4.22.5)(typescript@5.5.4)(vite@5.4.8(@types/node@22.7.4)(terser@5.34.1))
@@ -1117,6 +1120,12 @@ packages:
         integrity: sha512-EmvGN0L9EUJCmQ82rkLGZ4tkz0YGQfZV7ugKT6UvHni/bxNitQrD0gLj6NJj2W9zsSoXyNHyCX236+EJmO4pmA==,
       }
 
+  "@iconify-json/uil@1.2.1":
+    resolution:
+      {
+        integrity: sha512-bQPtDp1nVaDL+ejECPENHJalspCQCZreCJ2LHWazm0pfoz34afKAQKMSb1mH8K/CPnibCQTM29AvXrHMpyjbtg==,
+      }
+
   "@iconify/collections@1.0.465":
     resolution:
       {
@@ -8137,6 +8146,10 @@ snapshots:
     dependencies:
       "@iconify/types": 2.0.0
 
+  "@iconify-json/uil@1.2.1":
+    dependencies:
+      "@iconify/types": 2.0.0
+
   "@iconify/collections@1.0.465":
     dependencies:
       "@iconify/types": 2.0.0