From f1660036da15d98a76b400bdd0e63af18a3b6d03 Mon Sep 17 00:00:00 2001
From: Amalie <amalisso@stud.ntnu.no>
Date: Tue, 6 Oct 2026 16:46:42 +0200
Subject: [PATCH] =?UTF-8?q?Har=20lagt=20til=20ratingen=20p=C3=A5=20detalje?=
 =?UTF-8?q?visningen=20til=20en=20oppskrift=20(58)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/recipe/RecipeDetail.tsx | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/client/src/components/recipe/RecipeDetail.tsx b/client/src/components/recipe/RecipeDetail.tsx
index 5a96972..9a428b4 100644
--- a/client/src/components/recipe/RecipeDetail.tsx
+++ b/client/src/components/recipe/RecipeDetail.tsx
@@ -1,6 +1,7 @@
 import type { Recipe } from '../../types/recipe';
 import RestaurantIcon from '@mui/icons-material/Restaurant';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import { Rating } from '@mui/material';
 
 // Sier hva komponenten får inn.
 type RecipeDetailProps = {
@@ -11,13 +12,27 @@ 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 bg-background">
-                <ul className="flex flex-wrap gap-2 mb-4">
-                    {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>
+                <div className="flex flex-wrap items-center justify-between gap-2 mb-4">
+                    <ul className="flex flex-wrap gap-2">
+                        {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>
+                    {recipe.averageRating !== null ?(
+                        <div className="flex items-center gap-1">
+                            <Rating
+                                value={recipe.averageRating}
+                                readOnly
+                                precision={0.5}
+                                size="small"
+                            />
+                            <span>{recipe.averageRating.toFixed(1)}</span>
+                        </div>
+                            ) : ( <p>Ingen rating ennå</p>
+                        )}
+                </div>
                 <h1 className="font-heading text-4xl md:text-5xl">{recipe.title}</h1>
                 <div>
                     <p>{recipe.description}</p>