✨ Search improvements.

src/routes/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { iSVG } from '@/types/svg';
+  import { cn } from '@/utils/cn';
 
   // Get all svgs:
-  import { svgs } from '@/data/svgs';
-  const allSvgs = JSON.parse(JSON.stringify(svgs));
+  import { svgsData } from '@/data';
+  const allSvgs = JSON.parse(JSON.stringify(svgsData));
 
   // Components:
   import Search from '@/components/search.svelte';
@@ -11,18 +12,23 @@
   import SvgCard from '@/components/svgCard.svelte';
   import Grid from '@/components/grid.svelte';
   import NotFound from '@/components/notFound.svelte';
-  import { cn } from '@/utils/cn';
+  import { ArrowDownUpIcon, ArrowUpDownIcon } from 'lucide-svelte';
+
+  let sorted: boolean = false;
 
   // Search:
   let searchTerm = '';
   let filteredSvgs: iSVG[] = [];
 
+  // Order by last added:
+
   if (searchTerm.length === 0) {
     filteredSvgs = allSvgs.sort((a: iSVG, b: iSVG) => {
-      return b.id - a.id;
+      return b.id! - a.id!;
     });
   }
 
+  // Search svgs:
   const searchSvgs = () => {
     return (filteredSvgs = allSvgs.filter((svg: iSVG) => {
       let svgTitle = svg.title.toLowerCase();
@@ -30,10 +36,35 @@
     }));
   };
 
+  // Clear search:
   const clearSearch = () => {
     searchTerm = '';
     searchSvgs();
   };
+
+  // Sort:
+  const sort = () => {
+    if (sorted) {
+      sortByLatest();
+    } else {
+      sortAlphabetically();
+    }
+    sorted = !sorted;
+  };
+
+  // Sort alphabetically:
+  const sortAlphabetically = () => {
+    filteredSvgs = allSvgs.sort((a: iSVG, b: iSVG) => {
+      return a.title.localeCompare(b.title);
+    });
+  };
+
+  // Sort by latest:
+  const sortByLatest = () => {
+    filteredSvgs = allSvgs.sort((a: iSVG, b: iSVG) => {
+      return b.id! - a.id!;
+    });
+  };
 </script>
 
 <svelte:head>
@@ -48,6 +79,22 @@
 />
 
 <Container>
+  <div class="flex items-center justify-end mb-4">
+    <button
+      class={cn(
+        'flex items-center justify-center space-x-1 rounded-md px-3 py-1.5 text-sm font-medium',
+        filteredSvgs.length === 0 && 'hidden'
+      )}
+      on:click={() => sort()}
+    >
+      {#if sorted}
+        <ArrowDownUpIcon size={16} strokeWidth={2} class="mr-1" />
+      {:else}
+        <ArrowUpDownIcon size={16} strokeWidth={2} class="mr-1" />
+      {/if}
+      <span>{sorted ? 'Sort by latest' : 'Sort alphabetically'}</span>
+    </button>
+  </div>
   <Grid>
     {#each filteredSvgs as svg}
       <SvgCard svgInfo={svg} />

src/routes/directory/[slug]/+page.svelte

@@ -19,7 +19,7 @@
 
   if (searchTerm.length === 0) {
     filteredSvgs = svgsByCategory.sort((a: iSVG, b: iSVG) => {
-      return b.id - a.id;
+      return b.id! - a.id!;
     });
   }