From 69b7920f23f5d6bda0656c2224f4801cddbf519a Mon Sep 17 00:00:00 2001
From: Anika Raemer <araemer@laptop-anika.raemer.net>
Date: Sun, 7 Sep 2025 16:51:11 +0200
Subject: [PATCH] add list item component

---
 frontend/src/App.css                       |  2 +-
 frontend/src/components/RecipeListItem.tsx | 20 ++++++++++++++++++++
 frontend/src/components/RecipeListView.tsx | 12 +++++-------
 3 files changed, 26 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/RecipeListItem.tsx

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 240b32e..549732a 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -17,7 +17,7 @@
   }
 
   .sidebar-link {
-    @apply block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition
+    @apply block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition  w-full px-4 py-2  hover:bg-blue-100
   }
 
   .sidebar-item-text {
diff --git a/frontend/src/components/RecipeListItem.tsx b/frontend/src/components/RecipeListItem.tsx
new file mode 100644
index 0000000..cfe0d9c
--- /dev/null
+++ b/frontend/src/components/RecipeListItem.tsx
@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom"
+
+type RecipeListItemProps = {
+  title: string
+  targetPath: string
+}
+
+/**
+ * List item for the recipe list. Selecting an item navigates to the recipe
+ */
+export default function RecipeListItem({ title, targetPath: path}: RecipeListItemProps) {
+  return (
+    <Link
+        to={path}
+        className="sidebar-link"
+    >
+        <h2 className="sidebar-item-text">{title}</h2>
+    </Link>
+  )
+}
diff --git a/frontend/src/components/RecipeListView.tsx b/frontend/src/components/RecipeListView.tsx
index bafad9b..6aed0a8 100644
--- a/frontend/src/components/RecipeListView.tsx
+++ b/frontend/src/components/RecipeListView.tsx
@@ -1,5 +1,5 @@
-import { Link } from "react-router-dom"
 import { recipes } from "../mock_data/recipes"
+import RecipeListItem from "./RecipeListItem"
 
 /**
  * Displays a list of recipes in a sidebar layout.
@@ -12,13 +12,11 @@ export default function RecipeListView() {
 
       <div className="flex flex-col gap-2">
         {recipes.map((recipe) => (
-          <Link
+          <RecipeListItem 
             key={recipe.id}
-            to={`/recipe/${recipe.id}`}
-            className="sidebar-link block w-full px-4 py-2 rounded hover:bg-blue-100"
-          >
-            <h2 className="sidebar-item-text">{recipe.title}</h2>
-          </Link>
+            title = {recipe.title}
+            targetPath={'recipe/'+recipe.id}
+          />
         ))}
       </div>
     </div>