From 1b537c9d7f796d93fdb9ceeefcc6d9e8e2c9217d Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 26 Feb 2025 13:10:08 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=99=EF=B8=8F=20Update=20SVG=20display=20l?=
 =?UTF-8?q?imit=20to=20a=20configurable=20maximum?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+page.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 182fcb3..2921958 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,7 +4,7 @@
   import { onMount } from 'svelte';
   import { queryParam } from 'sveltekit-search-params';
   import Fuse from 'fuse.js';
-  
+
   // Get all svgs:
   import { svgsData } from '@/data';
   const allSvgs = JSON.parse(JSON.stringify(svgsData));
@@ -43,9 +43,10 @@
   let searchTerm = '';
   let filteredSvgs: iSVG[] = [];
   let displaySvgs: iSVG[] = [];
+  let maxDisplay = 24;
 
   const updateDisplaySvgs = () => {
-    displaySvgs = showAll ? filteredSvgs : filteredSvgs.slice(0, 30);
+    displaySvgs = showAll ? filteredSvgs : filteredSvgs.slice(0, maxDisplay);
   };
 
   // Hybrid search strategy:
@@ -145,7 +146,7 @@
       <SvgCard svgInfo={svg} {searchTerm} />
     {/each}
   </Grid>
-  {#if filteredSvgs.length > 30 && !showAll}
+  {#if filteredSvgs.length > maxDisplay && !showAll}
     <div class="mt-4 flex items-center justify-center">
       <button
         class={buttonStyles}
@@ -158,7 +159,7 @@
           <ArrowDown size={16} strokeWidth={2} />
           <span>Load All SVGs</span>
           <span class="opacity-70">
-            ({filteredSvgs.length - 30} more)
+            ({filteredSvgs.length - maxDisplay} more)
           </span>
         </div>
       </button>