⚙️ Update icons alias & create raycast warning message

2025-12-29 08:01:36 +08:00 · 2024-08-26 16:50:17 +01:00
parent 008d072510
commit 0754f3e0dd
5 changed files with 132 additions and 16 deletions
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { toast } from 'svelte-sonner';
+
+  import * as ContextMenu from '@/ui/context-menu';
+  import { CopyIcon } from 'lucide-svelte';
+  import Logo from './icons/logo.svelte';
+  import ReactIcon from './icons/reactIcon.svelte';
+
+  import { clipboard } from '@/utils/clipboard';
+  import { getSvgContent } from '@/utils/getSvgContent';
+  import { getReactComponentCode } from '@/utils/getReactComponentCode';
+
+  const logoUrl = '/library/svgl.svg';
+
+  const copyToClipboard = async () => {
+    const content = await getSvgContent(logoUrl);
+    await clipboard(content);
+    toast.success('Copied to clipboard', {
+      description: `Svgl - Library`
+    });
+  };
+
+  let isLoading = false;
+
+  const convertSvgReactComponent = async (tsx: boolean) => {
+    isLoading = true;
+
+    const title = 'svgl';
+    const content = await getSvgContent(logoUrl);
+    const dataComponent = { code: content, typescript: tsx, name: title };
+    const { data, error } = await getReactComponentCode(dataComponent);
+
+    if (error || !data) {
+      toast.error('Failed to fetch React component', {
+        description: `${error ?? ''}`,
+        duration: 5000
+      });
+      return;
+    }
+
+    await clipboard(data);
+
+    toast.success(`Copied as React ${tsx ? 'TSX' : 'JSX'} component`, {
+      description: `Svgl - Library`
+    });
+
+    isLoading = false;
+  };
+</script>
+
+<ContextMenu.Root>
+  <ContextMenu.Trigger class="flex items-center space-x-2">
+    <a href="/" aria-label="Go to the SVGL v4.1 home page">
+      <div class="flex items-center space-x-2 opacity-100 hover:opacity-80 transition-opacity">
+        <svelte:component this={Logo} />
+        <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
+        <p class="text-neutral-400 hidden md:block font-mono">v4.3</p>
+      </div>
+    </a>
+  </ContextMenu.Trigger>
+  <ContextMenu.Content>
+    <ContextMenu.Item on:click={() => copyToClipboard()}>
+      <CopyIcon size={16} strokeWidth={2} />
+      <span>Copy as SVG</span>
+    </ContextMenu.Item>
+    <ContextMenu.Item on:click={() => convertSvgReactComponent(false)}>
+      <ReactIcon iconSize={18} color="#60a5fa" />
+      <span>Copy as React JSX Component</span>
+    </ContextMenu.Item>
+    <ContextMenu.Item on:click={() => convertSvgReactComponent(true)}>
+      <ReactIcon iconSize={18} color="#2563eb" />
+      <span>Copy as React TSX Component</span>
+    </ContextMenu.Item>
+  </ContextMenu.Content>
+</ContextMenu.Root>