From 056508b68b48fee2a5ee4157f81db794dc6589d9 Mon Sep 17 00:00:00 2001
From: Amalie <amalisso@stud.ntnu.no>
Date: Thu, 1 Oct 2026 12:53:45 +0200
Subject: [PATCH] Legg til oppskriftsside med ingredienser, steg og tags (#28)

---
 client/src/components/recipe/RecipeDetail.tsx | 55 +++++++++++++++++++
 client/src/routes/RecipeDetailPage.tsx        |  8 ++-
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/recipe/RecipeDetail.tsx

diff --git a/client/src/components/recipe/RecipeDetail.tsx b/client/src/components/recipe/RecipeDetail.tsx
new file mode 100644
index 0000000..2ab59c5
--- /dev/null
+++ b/client/src/components/recipe/RecipeDetail.tsx
@@ -0,0 +1,55 @@
+import type { Recipe } from '../../types/recipe';
+
+// Sier hva komponenten får inn.
+type RecipeDetailProps = {
+    recipe: Recipe;
+};
+
+export function RecipeDetail({ recipe }: RecipeDetailProps) {
+    return (
+        <article className="grid md:grid-cols-2 gap-6">
+            <section className="border border-olive rounded-lg p-4 flex flex-col">
+                <h1 className="font-heading text-4xl md:text-5xl">{recipe.title}</h1>
+                <div className="flex justify-between">
+                    <p>{recipe.prepTime} minutter</p>
+                    <p>{recipe.portions} porsjoner</p>
+                </div>
+                <div>
+                    <p>{recipe.description}</p>
+                </div>
+                <ul className="flex flex-wrap gap-2 mt-auto">
+                    {recipe.tags.map((tag) => (
+                        <li className="rounded-full bg-olive text-background px-3 py-1 text-sm" key={tag.tagId}>
+                            {tag.tagName}
+                        </li>
+                    ))}
+                </ul>
+            </section>
+            <section className="rounded-lg">
+                <img className="w-full h-72 object-cover rounded-lg" src={recipe.imageURL} alt={recipe.title}/>
+            </section>
+            <section className="border border-olive rounded-lg p-4">
+                <h2 className="text-2xl font-semibold">Ingredienser</h2>
+                <ul>
+                    {recipe.ingredients.map((ingredient) => (
+                        <li key={ingredient.ingredientId}>
+                            <label>
+                                <input type="checkbox" /> {ingredient.amount} {ingredient.unit} {ingredient.name}
+                            </label>
+                        </li>
+                    ))}
+                </ul>
+            </section>
+            <section className="border border-olive rounded-lg p-4">
+                <h2 className="text-2xl font-semibold">Steg</h2>
+                <ol className="list-decimal list-inside">
+                    {recipe.steps.map((step) => (
+                        <li key={step.stepId}>
+                            {step.instruction}
+                        </li>
+                    ))}
+                </ol>
+            </section>
+        </article>
+    );
+}
\ No newline at end of file
diff --git a/client/src/routes/RecipeDetailPage.tsx b/client/src/routes/RecipeDetailPage.tsx
index 1eacd42..1eeb6fb 100644
--- a/client/src/routes/RecipeDetailPage.tsx
+++ b/client/src/routes/RecipeDetailPage.tsx
@@ -1,8 +1,14 @@
 import { useParams } from 'react-router';
+import { recipes } from '../mocks/recipes';
+import { RecipeDetail } from '../components/recipe/RecipeDetail';
 
 // Placeholder for en oppskrift. Henter id fra URL-en. som /recipes/5 gir id = 5
 export default function RecipeDetailPage() {
   const { id } = useParams();
+  const recipe = recipes.find((r) => r.recipeId === id);
+  if (!recipe) {
+    return <p>Fant ikke oppskriften.</p>
+  }
 
-  return <h1 className="font-heading text-4xl md:text-5xl">Oppskrift {id}</h1>;
+  return <RecipeDetail recipe={recipe} />;
 }