diff --git a/src/components/search.svelte b/src/components/search.svelte index 137dd89..ed6eb15 100644 --- a/src/components/search.svelte +++ b/src/components/search.svelte @@ -17,6 +17,7 @@ type="text" {placeholder} autocomplete="off" + autofocus={true} class="w-full border-b border-neutral-300 bg-white p-3 pl-11 placeholder-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 dark:focus:ring-neutral-700" bind:value={searchTerm} on:input diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte index 8248348..e9b9102 100644 --- a/src/components/svgCard.svelte +++ b/src/components/svgCard.svelte @@ -10,22 +10,28 @@ import { flyAndScale } from '@/utils/flyAndScale'; // Icons: - import { CopyIcon, DownloadIcon, LinkIcon, PackageIcon, PaintBucket, ChevronsRight } from 'lucide-svelte'; + import { + CopyIcon, + DownloadIcon, + LinkIcon, + PackageIcon, + PaintBucket, + ChevronsRight + } from 'lucide-svelte'; // Main Card: import CardSpotlight from './cardSpotlight.svelte'; import { DropdownMenu } from 'bits-ui'; // Figma - import { onMount } from "svelte"; + import { onMount } from 'svelte'; import { copyToClipboard as figmaCopyToClipboard } from '@/figma/copy-to-clipboard'; import { insertSVG as figmaInsertSVG } from '@/figma/insert-svg'; - // Props: export let svgInfo: iSVG; - - let isInFigma = false + + let isInFigma = false; onMount(() => { const searchParams = new URLSearchParams(window.location.search); isInFigma = searchParams.get('figma') === '1'; @@ -69,7 +75,7 @@ [MIMETYPE]: getSvgContent(url, true) }; - if(isInFigma) { + if (isInFigma) { const content = (await getSvgContent(url, false)) as string; figmaCopyToClipboard(content); } else { @@ -90,7 +96,7 @@ const insertSVG = async (url?: string) => { const content = (await getSvgContent(url, false)) as string; figmaInsertSVG(content); - } + }; // Icon Stroke & Size: let iconStroke = 1.8; @@ -157,7 +163,6 @@ {/if} - - {#each filteredSvgs as svg} + {#each filteredSvgs.slice(0, showAll ? undefined : 30) as svg} {/each} + {#if filteredSvgs.length > 30 && !showAll} +
+ +
+ {/if} {#if filteredSvgs.length === 0} {/if}