Legg til oppskriftsside med ingredienser, steg og tags (#28)

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

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} />;
 }