From 30c138d13f1de812e98e71238169ce0dd4220040 Mon Sep 17 00:00:00 2001
From: Anika Raemer <araemer@laptop-anika.raemer.net>
Date: Sun, 14 Sep 2025 14:10:46 +0200
Subject: [PATCH] add custom search field component

---
 frontend/src/App.css                          |  2 +-
 .../src/components/basics/SearchField.tsx     | 73 +++++++++++++++++++
 .../src/components/recipes/RecipeEditor.tsx   |  2 +-
 .../src/components/recipes/RecipeListPage.tsx | 16 ++--
 4 files changed, 84 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/basics/SearchField.tsx

diff --git a/frontend/src/App.css b/frontend/src/App.css
index ae4e583..79dc4f9 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -43,7 +43,7 @@
 
   /* input field */
   .input-field {
-    @apply border p-2 w-full rounded placeholder-gray-400;
+    @apply p-2 w-full border rounded-md placeholder-gray-400 border-gray-600 hover:border-blue-600 transition-colors text-gray-600 focus:outline-none focus:border-blue-800;
   }
 
   .text-area {
diff --git a/frontend/src/components/basics/SearchField.tsx b/frontend/src/components/basics/SearchField.tsx
new file mode 100644
index 0000000..acce6a7
--- /dev/null
+++ b/frontend/src/components/basics/SearchField.tsx
@@ -0,0 +1,73 @@
+/**
+ * Custom search field component including a clear search functionality
+ */
+type SearchFieldProps = { 
+    searchString : string
+    onSearchStringChanged: (searchString : string) => void
+}
+
+/**
+ * @param SearchFieldProps consisting of an initial searchString and an onSearchStringChanged handler
+ * @returns Custom search field component
+ */
+export default function SearchField({searchString, onSearchStringChanged} : SearchFieldProps){
+    const setSearchString = (newSearchString : string) => {
+        searchString = newSearchString;
+        onSearchStringChanged(searchString)
+    }
+
+    return (
+        <div className="relative">
+        {/* Input of searchfield
+            Defines border and behavior. Requires extra padding at both sides to
+            accomodate the icons
+         */}
+        <input
+            className="input-field pl-10 pr-10"
+            type="text"
+            placeholder="Search"
+            value={searchString}
+            onChange={ e => setSearchString(e.target.value) }
+        />
+        {/* Right icon: X 
+            Clears search string on click
+          */}
+        <button 
+            className="absolute right-0 inset-y-0 flex items-center"
+            onClick = { () => setSearchString("") }
+        >
+            <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="-ml-1 mr-3 h-6 w-6 text-gray-400 hover:text-gray-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            >
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M6 18L18 6M6 6l12 12"
+            />
+            </svg>
+        </button>
+        {/* Left icon: Looking glass */}
+        <div className="absolute left-0 inset-y-0 flex items-center">
+            <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="ml-3 h-6 w-6 text-gray-400 hover:text-gray-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            >
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+            </svg>
+        </div>
+    </div>
+    )
+}
diff --git a/frontend/src/components/recipes/RecipeEditor.tsx b/frontend/src/components/recipes/RecipeEditor.tsx
index ea8540d..040fc5b 100644
--- a/frontend/src/components/recipes/RecipeEditor.tsx
+++ b/frontend/src/components/recipes/RecipeEditor.tsx
@@ -121,7 +121,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
       <h3 className="subsection-heading">Instructions</h3>
       {/* Instructions */}
       <textarea
-        className="text-area"
+        className="input-field"
         placeholder="Instructions"
         value={draft.instructions}
         onChange={e => setDraft({ ...draft, instructions: e.target.value })}
diff --git a/frontend/src/components/recipes/RecipeListPage.tsx b/frontend/src/components/recipes/RecipeListPage.tsx
index 36c951c..bb80557 100644
--- a/frontend/src/components/recipes/RecipeListPage.tsx
+++ b/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}
             >