add list item component

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>