add custom search field component

frontend/src/components/recipes/RecipeListPage.tsx

@@ -4,6 +4,7 @@ import type { Recipe } from "../../types/recipe"
 import { fetchRecipeList } from "../../api/recipePoint"
 import { useNavigate } from "react-router-dom"
 import { getRecipeAddUrl, getRecipeDetailUrl } from "../../routes"
+import SearchField from "../basics/SearchField"
 
 /**
  * Displays a list of recipes in a sidebar layout.
@@ -36,7 +37,7 @@ export default function RecipeListPage() {
 
   if(!recipeList) { return <div>Unable to load recipes!</div>}
   return (
-    /*Contaier spanning entire screen used to center content horizontally */
+    /*Container spanning entire screen used to center content horizontally */
     <div className="w-screen min-h-screen flex justify-center">
       {/* Container defining the maximum width of the content */}
       <div className="bg-gray-100 w-full min-h-screen max-w-5xl shadow-xl p-8">
@@ -44,13 +45,14 @@ export default function RecipeListPage() {
         <div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
           <h1 className="content-title text-blue-900">Recipes</h1>
           <div className="flex columns-4 content-stretch gap-2 items-center">
+            {/* Number of recipes inlist */}
             <label className="text-gray-500 w-2/3">{recipeList.length} Recipes</label>
-            <input className="input-field"
-              placeholder="Search"
-              onChange={e => {
-                setSearchString(e.target.value)
-              }}
-            ></input>
+            {/* Search field */}
+            <SearchField 
+              searchString=""
+              onSearchStringChanged={setSearchString}
+            />
+            {/* Add recipe button */}
             <button className="primary-button"
               onClick={handleAdd}
             >