feat: uses the search bar component in the header

This is only a temporary implementation, requires options aka the search
terms to be populated and an implementation for the `onSelect()`
function which should update a global state for the selected edam term.

Requires implementation of a global state machine before real usage.

Author: joshbaskaran

src/components/app-header.tsx

@@ -4,6 +4,7 @@ import { Link } from "lucide-react";
 import GitHub from "@/assets/svg/github";
 import { EdamVersionSelector } from "@/components/edam-version-selector";
 import { EdamConceptSelector } from "@/components/edam-concept-selector";
+import { SearchBar } from "@/components/search-bar";
 
 export function AppHeader() {
 	return (
@@ -40,6 +41,14 @@ export function AppHeader() {
 				<EdamVersionSelector />
 				<EdamConceptSelector />
 			</div>
+			<div className="place-content-center">
+				{/* TODO: replace the `onSelect` with a global state handling function */}
+				<SearchBar
+					options={[]}
+					placeholder="Search EDAM term"
+					onSelect={(option) => console.log("Selected: ", option)}
+				/>
+			</div>
 			<div className="ml-auto content-center">
 				<ThemeToggle />
 			</div>