From 5726bdb1540175c3e4461b55507c26a396b24e3d Mon Sep 17 00:00:00 2001
From: Anika Raemer <araemer@laptop-anika.raemer.net>
Date: Sat, 13 Sep 2025 09:43:09 +0200
Subject: [PATCH] add search bar and add button to header - no functionality
 yet!

---
 .../src/components/recipes/RecipeListPage.tsx    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/recipes/RecipeListPage.tsx b/frontend/src/components/recipes/RecipeListPage.tsx
index 327750e..90753e0 100644
--- a/frontend/src/components/recipes/RecipeListPage.tsx
+++ b/frontend/src/components/recipes/RecipeListPage.tsx
@@ -25,19 +25,27 @@ export default function RecipeListPage() {
         loadRecipeList()
       }, [])
   
-  if(!recipeList) { return <div>Unable to load recipes1</div>}
+  if(!recipeList) { return <div>Unable to load recipes!</div>}
   return (
     /*Contaier 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">
         {/* Header - remains in position when scrolling */}
-        <div className="sticky bg-gray-100 top-0 left-0 right-0 mb-4">
+        <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>
-          <label>{recipeList.length} Recipes</label>
+          <div className="flex columns-4 content-stretch gap-2 items-center">
+            <label className="text-gray-500 w-2/3">{recipeList.length} Recipes</label>
+            <input className="input-field"
+              placeholder="Search"
+            ></input>
+            <button className="primary-button">
+              Add recipe
+            </button>
+          </div>
         </div>
         {/*Content - List of recipe cards */}
-        <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(220px,1fr))]">
+        <div className="grid pt-4 gap-6 grid-cols-[repeat(auto-fit,minmax(220px,1fr))]">
           {recipeList.map((recipe) => (
             <RecipeListItem 
               key={recipe.id}