qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-06 06:58:04 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

🎨 Add new lucide icons and improve category display + show popover content

Browse Source
This commit is contained in:
pheralb 2024-08-22 14:24:58 +01:00
parent c477b6c83b
commit a047575e69
2 changed files with 36 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/copySvg.svelte
View File

@ -139,7 +139,7 @@
<CopyIcon size={iconSize} strokeWidth={iconStroke} /> <CopyIcon size={iconSize} strokeWidth={iconStroke} />
{/if} {/if}
</Popover.Trigger> </Popover.Trigger>
<Popover.Content class="flex flex-col space-y-2" sideOffset={0.3}> <Popover.Content class="flex flex-col space-y-2" sideOffset={3}>
<button <button
class={cn(buttonStyles, 'rounded-md w-full')} class={cn(buttonStyles, 'rounded-md w-full')}
title={isWordmarkSvg ? 'Copy wordmark SVG to clipboard' : 'Copy SVG to clipboard'} title={isWordmarkSvg ? 'Copy wordmark SVG to clipboard' : 'Copy SVG to clipboard'}

39
src/components/svgCard.svelte
View File

@ -6,12 +6,20 @@
import { getSvgContent } from '@/utils/getSvgContent'; import { getSvgContent } from '@/utils/getSvgContent';
// Icons: // Icons:
import { LinkIcon, ChevronsRight, Baseline, Sparkles } from 'lucide-svelte'; import {
LinkIcon,
ChevronsRight,
Baseline,
Sparkles,
EllipsisIcon,
TagIcon
} from 'lucide-svelte';
// Components & styles: // Components & styles:
import DownloadSvg from './downloadSvg.svelte'; import DownloadSvg from './downloadSvg.svelte';
import CopySvg from './copySvg.svelte'; import CopySvg from './copySvg.svelte';
import { badgeStyles } from '@/ui/styles'; import { badgeStyles, buttonStyles } from '@/ui/styles';
import * as Popover from '@/ui/popover';
// Figma // Figma
import { onMount } from 'svelte'; import { onMount } from 'svelte';
@ -38,6 +46,9 @@
let iconStroke = 1.8; let iconStroke = 1.8;
let iconSize = 16; let iconSize = 16;
// Max Categories:
let maxVisibleCategories = 1;
// Global Images Styles: // Global Images Styles:
const globalImageStyles = 'mb-4 mt-2 h-10 select-none'; const globalImageStyles = 'mb-4 mt-2 h-10 select-none';
</script> </script>
@ -88,9 +99,29 @@
</p> </p>
<div class="flex items-center space-x-1 justify-center"> <div class="flex items-center space-x-1 justify-center">
{#if Array.isArray(svgInfo.category)} {#if Array.isArray(svgInfo.category)}
{#each svgInfo.category.sort() as c, index} {#each svgInfo.category.slice(0, maxVisibleCategories) as c, index}
<a href={`/directory/${c.toLowerCase()}`} class={badgeStyles}>{c} </a> <a href={`/directory/${c.toLowerCase()}`} class={badgeStyles}>{c}</a>
{/each} {/each}
{#if svgInfo.category.length > maxVisibleCategories}
<Popover.Root>
<Popover.Trigger class={badgeStyles} title="More Tags">
<EllipsisIcon size={15} strokeWidth={1.5} />
</Popover.Trigger>
<Popover.Content class="flex flex-col space-y-2">
<p class="font-medium">More tags:</p>
{#each svgInfo.category.slice(maxVisibleCategories) as c}
<a
href={`/directory/${c.toLowerCase()}`}
class={cn(buttonStyles, 'rounded-md w-full')}
>
<TagIcon size={15} strokeWidth={1.5} />
<span>{c}</span>
</a>
{/each}
</Popover.Content>
</Popover.Root>
{/if}
{:else} {:else}
<a href={`/directory/${svgInfo.category.toLowerCase()}`} class={badgeStyles}> <a href={`/directory/${svgInfo.category.toLowerCase()}`} class={badgeStyles}>
{svgInfo.category} {svgInfo.category}