35 lines
951 B
JavaScript

//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