From 00f8b2b90aed757f305302da7293877a2ed1999a Mon Sep 17 00:00:00 2001
From: J-onasJones <me@jonasjones.dev>
Date: Fri, 7 Jun 2024 13:30:57 +0200
Subject: [PATCH] added search bar

---
 src/App.svelte               | 10 +++++++++-
 src/components/Navbar.svelte | 15 +++++++++++++++
 src/routes/Home.svelte       | 21 +++------------------
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index f851b33..6d6734c 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -21,14 +21,22 @@
         window.addEventListener('scroll', handleScroll);
         return () => window.removeEventListener('scroll', handleScroll);
     });
+
+	let searchValue = '';
+
+	function handleSearch(event) {
+		// Update the searchValue with the value received from the child component
+		searchValue = event.detail;
+	}
 </script>
 
 <Title visible={showTitle} />
-<Navbar />
+<Navbar on:search={handleSearch} />
 
 <main>
 	<div class="content">
 		<Router {routes} />
+		<p>Search Value: {searchValue}</p>
 	</div>
 </main>
 
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
index f184bc8..f337ceb 100644
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@@ -1,8 +1,23 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+
+    let searchTerm = '';
+
+    function handleSearch() {
+      // Dispatch an event with the search term as payload
+      dispatch('search', searchTerm);
+    }
+  </script>
+
 <nav class="navbar">
     <ul>
         <li><a href="/#/">Home</a></li>
         <li><a href="https://jonasjones.dev/about">About</a></li>
         <li><a href="#contact">Contact</a></li>
+        <input type="text" bind:value={searchTerm} />
+        <button on:click={handleSearch}>Search</button>
         <a href="https://jonasjones.dev" class="sticky-link">Homepage</a>
     </ul>
 </nav>
diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte
index 922e0f5..e37af9a 100644
--- a/src/routes/Home.svelte
+++ b/src/routes/Home.svelte
@@ -1,18 +1,3 @@
-<h1>Hello world!</h1>
-<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-<p>
-    This template is pre-configured with svlete-spa-router for routing.<br/>
-    Visit the <a href="https://github.com/ItalyPaleAle/svelte-spa-router">documentation for the router</a> to learn more.
-</p>
-<p>
-    Check a route: <a href="#/lorem/2">Lorem ipsum</a>
-</p>
-
-<style>
-	h1 {
-		color: #ff3e00;
-		text-transform: uppercase;
-		font-size: 4em;
-		font-weight: 100;
-	}
-</style>
+<div>
+	<h1>Welcome to my Blog!</h1>
+</div>
\ No newline at end of file