chore: Update QRCode component with improved links

kunkunsh · May 28, 2024 · fe6449d · fe6449d
1 parent 8c5b207
commit fe6449d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/extensions/qrcode/src/App.svelte b/extensions/qrcode/src/App.svelte
@@ -5,9 +5,15 @@
   import QR from "$lib/components/QR.svelte";
   import QRCode from "easyqrcodejs";
   import { onMount } from "svelte";
-  import { clipboard, fs, dialog } from "jarvis-api/ui";
+  import { clipboard, fs, dialog, open } from "jarvis-api/ui";
   import * as v from "valibot";
-  import { ClipboardCopyIcon, DownloadIcon, RefreshCcwIcon, SearchIcon } from "lucide-svelte/icons";
+  import {
+    ClipboardCopyIcon,
+    LinkIcon,
+    DownloadIcon,
+    RefreshCcwIcon,
+    SearchIcon,
+  } from "lucide-svelte/icons";
   import { ModeWatcher } from "mode-watcher";
 
   let url: string;
@@ -98,13 +104,19 @@
     </div>
     {#if url}
       <div class="prose mt-3">
-        <pre>{url}</pre>
+        <pre
+          on:click={() => {
+            if (url.startsWith("http")) {
+              open(url);
+            }
+          }}
+          class="text-wrap px-3 cursor-pointer">{url}</pre>
       </div>
     {/if}
-    <a href="./detect-qrcode">
+    <a href="./detect-qrcode.html">
       <Button size="sm">
         <SearchIcon class="mr-1 h-4 w-4" />
-        Detect QRCode From Screenshot</Button
+        Detect QRCode From Screenshot <LinkIcon class="w-4 ml-2" /></Button
       >
     </a>
   </div>

diff --git a/extensions/qrcode/src/DetectQRCode.svelte b/extensions/qrcode/src/DetectQRCode.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import jsQR from "jsqr";
-  import { clipboard } from "jarvis-api/ui";
+  import { clipboard, open } from "jarvis-api/ui";
   import { Button } from "$lib/components/ui/button";
   import { ModeWatcher } from "mode-watcher";
   import { onMount } from "svelte";
+  import { LinkIcon } from "lucide-svelte/icons";
 
   let imgSrc = "";
   let detectedCode = "";
@@ -51,10 +52,16 @@
     <div class="flex space-x-3">
       <Button on:click={readScreenshot}>Read QRCode Screenshot From Clipboard</Button>
       <a href="./">
-        <Button>Generate QRCode</Button>
+        <Button>Generate QRCode <LinkIcon class="w-4 ml-2" /></Button>
       </a>
     </div>
     <img width="300" src={imgSrc} alt="" />
-    <a href={detectedCode}>{detectedCode}</a>
+    <a
+      href={detectedCode}
+      on:click={(e) => {
+        e.preventDefault();
+        open(detectedCode);
+      }}>{detectedCode}</a
+    >
   </div>
 </main>