built search bar component

client/kb-frontend/src/App.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import './App.css'
 import Header from './components/Header'
+import SearchBar from './SearchBar'
 
 function App() {
   const [currentView, setCurrentView] = useState('list');
@@ -42,7 +43,7 @@ function App() {
 
       {currentView === 'list' ? (
         <>
-          {/*<SearchBar onSearch={handleSearch} />*/}
+          <SearchBar onSearch={handleSearch} />
           {/*<ArticleList articles={articles} onArticleClick={handleArticleClick} />*/}
         </>
       ) : (

client/kb-frontend/src/components/SearchBar.jsx

@@ -0,0 +1,35 @@
+//import 'SearchBar.css'
+import { useState } from 'react'
+
+function SearchBar({ onSearch }) {
+    const [query, setQuery] = useState('');
+
+    const handleSearch = (e) => {
+        e.preventDefault();
+        onSearch(query);
+    };
+
+    return (
+        <div className='search-bar'>
+            <form onSubmit={handleSearch}>
+                <input
+                    type='text'
+                    placeholder='Search articles by title, content, or KA number...'
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+
+                    /*  USer this for instant search
+                    onChange={(e) => {
+                        setQuery(e.target.value);
+                        onSearch(e.target.value);
+                    }}
+                    */
+    
+                />
+                <button type='submit'>Search</button>
+            </form>
+        </div>
+    );
+}
+
+export default SearchBar