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

feat: multiple category feature

Browse Source
This commit is contained in:
ridemountainpig
2024-01-16 11:27:57 +08:00
parent 0fc7ab88c4
commit 6d5e54b602
5 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/svgCard.svelte
+33 -9
View File
@@ -44,8 +44,13 @@
// Download SVG:
const downloadSvg = (url?: string) => {
download(url || '');
const category = Array.isArray(svgInfo.category)
? svgInfo.category.sort().join(' - ')
: svgInfo.category;
toast.success(`Downloading...`, {
description: `${svgInfo.title} - ${svgInfo.category}`
description: `${svgInfo.title} - ${category}`
});
};
@@ -81,8 +86,12 @@
download(content, `${svgInfo.title}.zip`, 'application/zip');
});
const category = Array.isArray(svgInfo.category)
? svgInfo.category.sort().join(' - ')
: svgInfo.category;
toast.success('Downloading light & dark variants...', {
description: `${svgInfo.title} - ${svgInfo.category}`
description: `${svgInfo.title} - ${category}`
});
};
@@ -105,22 +114,26 @@
await navigator.clipboard.writeText(content);
}
const category = Array.isArray(svgInfo.category)
? svgInfo.category.sort().join(' - ')
: svgInfo.category;
if (isInFigma) {
toast.success('Ready to paste in Figma!', {
description: `${svgInfo.title} - ${svgInfo.category}`
description: `${svgInfo.title} - ${category}`
});
return;
}
if (wordmarkSvg) {
toast.success('Copied wordmark SVG to clipboard!', {
description: `${svgInfo.title} - ${svgInfo.category}`
description: `${svgInfo.title} - ${category}`
});
return;
}
toast.success('Copied to clipboard!', {
description: `${svgInfo.title} - ${svgInfo.category}`
description: `${svgInfo.title} - ${category}`
});
};
@@ -177,10 +190,21 @@
<p class="truncate text-[15px] font-medium text-balance text-center select-all">
{svgInfo.title}
</p>
<a
href={`/directory/${svgInfo.category.toLowerCase()}`}
class="text-sm lowercase text-neutral-500 hover:underline font-mono">{svgInfo.category}</a
>
</div>
<div class="mb-3 flex flex-col items-center justify-center h-10">
{#if Array.isArray(svgInfo.category)}
{#each svgInfo.category.sort() as c}
<a
href={`/directory/${c.toLowerCase()}`}
class="text-sm lowercase text-neutral-500 hover:underline font-mono">{c}</a
>
{/each}
{:else}
<a
href={`/directory/${svgInfo.category.toLowerCase()}`}
class="text-sm lowercase text-neutral-500 hover:underline font-mono">{svgInfo.category}</a
>
{/if}
</div>
<!-- Actions -->
<div class="flex items-center space-x-1">