Har lagt til ratingen på detaljevisningen til en oppskrift (58)

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>