⚙️ Add loadMore button.

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

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';
@@ -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 @@
         </button>
       {/if}
 
-
       <button
         title="Copy to clipboard"
         on:click={() => {
@@ -211,7 +216,9 @@
               <p>Light & Dark variants</p>
             </DropdownMenu.Item>
             <DropdownMenu.Item
-              title="Download only {document.documentElement.classList.contains('dark') ? 'dark' : 'light'} variant"
+              title="Download only {document.documentElement.classList.contains('dark')
+                ? 'dark'
+                : 'light'} variant"
               class="flex h-10 select-none items-center rounded-md py-3 pl-3 pr-1.5 text-sm font-medium cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-700/40"
               on:click={() => {
                 const svgHasTheme = typeof svgInfo.route !== 'string';

src/routes/+layout.svelte

@@ -40,7 +40,7 @@
   >
     <div class="md:px-6 md:py-6">
       <nav
-        class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-300 dark:border-neutral-700/40 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible px-5 md:px-0 pb-2 pt-3 md:pt-0"
+        class="flex items-center space-x-1 overflow-y-auto md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible px-5 md:px-0 pb-2 pt-3 md:pt-0"
       >
         <a
           href="/"
@@ -66,20 +66,6 @@
           </a>
         {/each}
       </nav>
-      <a
-        href="https://twitter.com/pheralb_"
-        target="_blank"
-        class="group mt-5 md:flex hidden items-center space-x-2 duration-100 hover:text-dark dark:text-neutral-400 dark:hover:text-white"
-      >
-        <Heart color="#991b1b" size={18} weight={'duotone'} />
-        <div class="flex items-center space-x-1">
-          <p class="text-muted text-sm">Created by pheralb</p>
-          <ArrowUpRight
-            size={14}
-            class="transition-transform duration-300 group-hover:-translate-y-[1px]"
-          />
-        </div>
-      </a>
     </div>
   </aside>
   <div class="ml-0 md:ml-56 pb-6">

src/routes/+page.svelte

@@ -14,9 +14,11 @@
   import NotFound from '@/components/notFound.svelte';
 
   // Icons:
-  import { ArrowDownUpIcon, ArrowUpDownIcon } from 'lucide-svelte';
+  import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon } from 'lucide-svelte';
 
   let sorted: boolean = false;
+  let isFirstLoad: boolean = true;
+  let showAll: boolean = false;
 
   // Search:
   let searchTerm = '';
@@ -29,12 +31,22 @@
     });
   }
 
+  const loadSvgs = () => {
+    if (isFirstLoad || showAll) {
+      filteredSvgs = allSvgs;
+      isFirstLoad = false;
+    } else {
+      filteredSvgs = allSvgs.slice(0, 30);
+    }
+  };
+
   // Search svgs:
   const searchSvgs = () => {
-    return (filteredSvgs = allSvgs.filter((svg: iSVG) => {
+    loadSvgs();
+    filteredSvgs = allSvgs.filter((svg: iSVG) => {
       let svgTitle = svg.title.toLowerCase();
       return svgTitle.includes(searchTerm.toLowerCase());
-    }));
+    });
   };
 
   // Clear search:
@@ -66,6 +78,8 @@
       return b.id! - a.id!;
     });
   };
+
+  loadSvgs();
 </script>
 
 <svelte:head>
@@ -97,10 +111,24 @@
     </button>
   </div>
   <Grid>
-    {#each filteredSvgs as svg}
+    {#each filteredSvgs.slice(0, showAll ? undefined : 30) as svg}
       <SvgCard svgInfo={svg} />
     {/each}
   </Grid>
+  {#if filteredSvgs.length > 30 && !showAll}
+    <div class="flex items-center justify-center mt-4">
+      <button
+        class="flex items-center space-x-2 rounded-md border border-neutral-300 p-2 duration-100 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-700/40"
+        on:click={() => (showAll = true)}
+      >
+        <ArrowDown size={16} strokeWidth={2} />
+        <span>Load All SVGs</span>
+        <span class="opacity-70">
+          ({filteredSvgs.length - 30} more)
+        </span>
+      </button>
+    </div>
+  {/if}
   {#if filteredSvgs.length === 0}
     <NotFound notFoundTerm={searchTerm} />
   {/if}