add list item component

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 {

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>
+  )
+}

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}`}
+            title = {recipe.title}
-            className="sidebar-link block w-full px-4 py-2 rounded hover:bg-blue-100"
+            targetPath={'recipe/'+recipe.id}
-          >
+          />
-            <h2 className="sidebar-item-text">{recipe.title}</h2>
-          </Link>
         ))}
       </div>
     </div>