🛠 Fix search input & layout improvements.

src/routes/+layout.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   // Global styles:
   import '../app.css';
 
@@ -31,7 +31,7 @@
       <div class="mb-3 flex flex-col space-y-1 border-b border-neutral-700/40 pb-3">
         {#each categories as category}
           <a
-            href={`/category/${category.toLowerCase()}`}
+            href={`/directory/${category.toLowerCase()}`}
             class="flex w-full items-center rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
             >{category}</a
           >

src/routes/+page.svelte

@@ -11,10 +11,10 @@
   import SvgCard from '../components/svgCard.svelte';
 
   // Search:
-  let search = '';
+  let searchTerm = "";
   let filteredSvgs: iSVG[] = [];
 
-  if (search.length === 0) {
+  if (searchTerm.length === 0) {
     filteredSvgs = allSvgs.sort((a: iSVG, b: iSVG) => {
       return b.id - a.id;
     });
@@ -23,13 +23,13 @@
   const searchSvgs = () => {
     return (filteredSvgs = allSvgs.filter((svg: iSVG) => {
       let svgTitle = svg.title.toLowerCase();
-      return svgTitle.includes(search.toLowerCase());
+      return svgTitle.includes(searchTerm.toLowerCase());
     }));
   };
 </script>
 
 <Container>
-  <Search searchTerm={search} on:input={searchSvgs} />
+  <Search bind:searchTerm on:input={searchSvgs} />
   <div class="mt-4 grid grid-cols-6 gap-4">
     {#each filteredSvgs as svg}
       <SvgCard svgInfo={svg} />