qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-12-29 08:01:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🎨 Update header link options

Browse Source
This commit is contained in:
pheralb
2025-02-25 15:31:13 +00:00
parent 81cbbb2b8c
commit ba4704a390
1 changed files with 13 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/headerLogoLink.svelte
+13 -37
View File
@@ -2,13 +2,12 @@
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import * as ContextMenu from '@/ui/context-menu'; import * as ContextMenu from '@/ui/context-menu';
import { CopyIcon } from 'lucide-svelte'; import { ArrowUpRightIcon, CopyIcon, StarsIcon } from 'lucide-svelte';
import Logo from './icons/logo.svelte'; import Logo from './icons/logo.svelte';
import ReactIcon from './icons/reactIcon.svelte';
import { clipboard } from '@/utils/clipboard'; import { clipboard } from '@/utils/clipboard';
import { getSvgContent } from '@/utils/getSvgContent'; import { getSvgContent } from '@/utils/getSvgContent';
import { getReactComponentCode } from '@/utils/getReactComponentCode'; import GithubIcon from './icons/githubIcon.svelte';
const logoUrl = '/library/svgl.svg'; const logoUrl = '/library/svgl.svg';
@@ -20,31 +19,8 @@
}); });
}; };
let isLoading = false; const openUrl = (url: string) => {
window.open(url, '_blank');
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> </script>
@@ -53,23 +29,23 @@
<a href="/" aria-label="Go to the SVGL v4.1 home page"> <a href="/" aria-label="Go to the SVGL v4.1 home page">
<div class="flex items-center space-x-2 opacity-100 transition-opacity hover:opacity-80"> <div class="flex items-center space-x-2 opacity-100 transition-opacity hover:opacity-80">
<svelte:component this={Logo} /> <svelte:component this={Logo} />
<span class="hidden text-[19px] font-medium tracking-wide md:block">svgl</span> <span class="hidden text-xl font-medium tracking-tight md:block">svgl</span>
<p class="hidden font-mono tracking-tight text-neutral-400 md:block">4.4</p>
</div> </div>
</a> </a>
</ContextMenu.Trigger> </ContextMenu.Trigger>
<ContextMenu.Content> <ContextMenu.Content>
<ContextMenu.Item on:click={() => copyToClipboard()}> <ContextMenu.Item on:click={() => copyToClipboard()}>
<CopyIcon size={16} strokeWidth={2} /> <CopyIcon size={16} strokeWidth={1.5} />
<span>Copy as SVG</span> <span>Copy as SVG</span>
</ContextMenu.Item> </ContextMenu.Item>
<ContextMenu.Item on:click={() => convertSvgReactComponent(false)}> <ContextMenu.Item on:click={() => openUrl('https://github.com/pheralb/svgl')}>
<ReactIcon iconSize={18} color="#60a5fa" /> <GithubIcon iconSize={16} />
<span>Copy as React JSX Component</span> <span>Repository</span>
<ArrowUpRightIcon class="text-neutral-400 dark:text-neutral-500" size={14} strokeWidth={2} />
</ContextMenu.Item> </ContextMenu.Item>
<ContextMenu.Item on:click={() => convertSvgReactComponent(true)}> <ContextMenu.Item disabled class="font-mono">
<ReactIcon iconSize={18} color="#2563eb" /> <StarsIcon size={16} strokeWidth={1.5} />
<span>Copy as React TSX Component</span> <span>v4.5</span>
</ContextMenu.Item> </ContextMenu.Item>
</ContextMenu.Content> </ContextMenu.Content>
</ContextMenu.Root> </ContextMenu.Root>