initial commit

frontend/src/components/RecipeListView.tsx

@@ -0,0 +1,39 @@
+import { Link } from "react-router-dom"
+import { recipes } from "../mock_data/recipes"
+
+/**
+ * Displays a list of recipes in a grid layout.
+ * Each recipe links to its detail view.
+ */
+export default function RecipeListView() {
+  return (
+    <div className="p-6">
+      <h1 className="text-3xl font-bold mb-6">Recipes</h1>
+
+      {/* Grid of recipe cards */}
+      <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3">
+        {recipes.map((recipe) => (
+          <Link
+            key={recipe.id}
+            to={`/recipe/${recipe.id}`}
+            className="block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"
+          >
+            {/* Thumbnail image */}
+            {recipe.imageUrl && (
+              <img
+                src={recipe.imageUrl}
+                alt={recipe.title}
+                className="w-full h-40 object-cover"
+              />
+            )}
+
+            {/* Recipe title */}
+            <div className="p-4">
+              <h2 className="text-xl font-semibold">{recipe.title}</h2>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}