initial commit

frontend/src/components/RecipeDetailView.tsx

@@ -0,0 +1,61 @@
+import { useParams, Link } from "react-router-dom"
+import { recipes } from "../mock_data/recipes"
+
+/**
+ * Displays the full detail of a single recipe,
+ * including its ingredients, instructions, and image.
+ */
+export default function RecipeDetailView() {
+  // Extract recipe ID from route params
+  const { id } = useParams<{ id: string }>()
+  const recipe = recipes.find((r) => r.id === id)
+
+  if (!recipe) {
+    return <p className="p-6">Recipe not found.</p>
+  }
+
+  return (
+    <div className="p-6 max-w-2xl mx-auto">
+      <h1 className="text-3xl font-bold mb-4">{recipe.title}</h1>
+
+      {/* Recipe image */}
+      {recipe.imageUrl && (
+        <img
+          src={recipe.imageUrl}
+          alt={recipe.title}
+          className="w-full rounded-xl mb-4"
+        />
+      )}
+
+      {/* Ingredients */}
+      <h2 className="font-semibold">Ingredients</h2>
+      <ul className="list-disc pl-6">
+        {recipe.ingredients.map((ing, i) => (
+        <li key={i}>
+          {ing.amount} {ing.unit ?? ""} {ing.name}
+        </li>
+        ))}
+      </ul>
+
+      {/* Instructions */}
+      <h2 className="text-xl font-semibold mb-2">Instructions</h2>
+      <p className="mb-6">{recipe.instructions}</p>
+
+      {/* Action buttons */}
+      <div className="flex gap-4">
+        <Link
+          to={`/recipe/${recipe.id}/edit`}
+          className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600"
+        >
+          Edit
+        </Link>
+        <Link
+          to="/"
+          className="bg-gray-300 px-4 py-2 rounded-lg hover:bg-gray-400"
+        >
+          Back
+        </Link>
+      </div>
+    </div>
+  )
+}