From 148bccc5cecb7382e58ed666d2d9bd0c14f88adf Mon Sep 17 00:00:00 2001
From: Pablo Hdez <62877300+pheralb@users.noreply.github.com>
Date: Fri, 17 Mar 2023 14:00:17 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=20Fix=20search=20input=20&=20layou?=
 =?UTF-8?q?t=20improvements.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+layout.svelte | 4 ++--
 src/routes/+page.svelte   | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5e887b1..d1ead55 100644
--- a/src/routes/+layout.svelte
+++ b/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
           >
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bae56d4..71b4c59 100644
--- a/src/routes/+page.svelte
+++ b/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} />