Har lagt til stjerner som viser average rating på recipe cards (56)

client/src/components/recipe/RecipeCard.tsx

@@ -1,5 +1,6 @@
 import type { Recipe } from '../../types/recipe';
 import { Link } from 'react-router';
+import { Rating } from '@mui/material';
 
 // Sier hva komponenten får inn.
 type RecipeCardProps = {
@@ -9,13 +10,24 @@ type RecipeCardProps = {
 export function RecipeCard({ recipe }: RecipeCardProps) {
     return (
         <Link to={`/recipes/${recipe.recipeId}`} className="block h-full rounded-lg focus-visible:outline-2 focus-visible:outline-primary">
-            <article className="border border-olive rounded-lg p-4 text-black h-full bg-secondary/50 transition hover:shadow-lg hover:border-primary group">
+            <article className="border border-olive rounded-lg p-4 text-black h-full bg-secondary/50 transition hover:shadow-lg hover:border-primary group flex flex-col">
                 <img className="w-full aspect-square object-cover rounded-md" src={recipe.imageURL} alt={recipe.title}/>
-                <h3 className="text-lg font-semibold group-hover:underline">{recipe.title}</h3>
+                <h3 className="text-lg font-semibold group-hover:underline min-h-14">{recipe.title}</h3>
                 <div className="flex justify-between">
                     <p>{recipe.prepTime} minutter</p>
                     <p>{recipe.portions} porsjoner</p>
                 </div>
+                <div className="mt-auto">
+                    {recipe.averageRating !== null ?(
+                        <Rating
+                        value={recipe.averageRating}
+                        readOnly
+                        precision={0.5}
+                        size="small"
+                        />
+                        ) : ( <p>Ingen rating ennå</p>
+                    )}
+                </div>
             </article>
         </Link>
     );

client/src/mocks/recipes.ts

@@ -45,6 +45,7 @@ export const recipes: Recipe[] = [
     description: 'Klassiske tynne pannekaker som passer til middag eller dessert.',
     prepTime: 30,
     portions: 4,
+    averageRating: 4.5,
     category: 'Dessert',
     imageURL: '/images/pannekaker.webp',
     status: 'Published',
@@ -71,6 +72,7 @@ export const recipes: Recipe[] = [
     description: 'Italiensk kjøttsaus med tomat, servert med spaghetti.',
     prepTime: 45,
     portions: 4,
+    averageRating: 4,
     category: 'Middag',
     imageURL: '/images/spaghetti-bolognese.webp',
     status: 'Published',
@@ -99,6 +101,7 @@ export const recipes: Recipe[] = [
     description: 'Rask wok med kylling, sprø grønnsaker og soyasaus.',
     prepTime: 25,
     portions: 3,
+    averageRating: 3.5,
     category: 'Middag',
     imageURL: '/images/kyllingwok.webp',
     status: 'Published',
@@ -127,6 +130,7 @@ export const recipes: Recipe[] = [
     description: 'Saftig laks bakt i ovn med sitron, servert med ovnspoteter.',
     prepTime: 40,
     portions: 4,
+    averageRating: 5,
     category: 'Middag',
     imageURL: '/images/ovnsbakt-laks.webp',
     status: 'Published',
@@ -154,6 +158,7 @@ export const recipes: Recipe[] = [
     description: 'Mettende og rimelig suppe med røde linser og krydder.',
     prepTime: 35,
     portions: 4,
+    averageRating: 4,
     category: 'Suppe',
     imageURL: '/images/linsesuppe.webp',
     status: 'Published',
@@ -181,6 +186,7 @@ export const recipes: Recipe[] = [
     description: 'Varm og enkel frokost med havregryn, melk og friske bær.',
     prepTime: 10,
     portions: 2,
+    averageRating: 3,
     category: 'Frokost',
     imageURL: '/images/havregrot.webp',
     status: 'Published',
@@ -206,6 +212,7 @@ export const recipes: Recipe[] = [
     description: 'Fredagsfavoritt med kjøttdeig, grønnsaker og lefser.',
     prepTime: 30,
     portions: 4,
+    averageRating: 4.5,
     category: 'Middag',
     imageURL: '/images/tacos.webp',
     status: 'Published',
@@ -234,6 +241,7 @@ export const recipes: Recipe[] = [
     description: 'Hjemmelagde kjøttkaker med brun saus, poteter og ertestuing.',
     prepTime: 60,
     portions: 4,
+    averageRating: 4,
     category: 'Middag',
     imageURL: '/images/kjottkaker.webp',
     status: 'Published',
@@ -263,6 +271,7 @@ export const recipes: Recipe[] = [
     description: 'Kremet fiskesuppe med hvit fisk, laks og grønnsaker.',
     prepTime: 40,
     portions: 4,
+    averageRating: 3.5,
     category: 'Suppe',
     imageURL: '/images/fiskesuppe.webp',
     status: 'Published',
@@ -289,6 +298,7 @@ export const recipes: Recipe[] = [
     description: 'Frisk salat med tomat, agurk, oliven og fetaost.',
     prepTime: 15,
     portions: 2,
+    averageRating: 4,
     category: 'Salat',
     imageURL: '/images/gresk-salat.webp',
     status: 'Published',
@@ -315,6 +325,7 @@ export const recipes: Recipe[] = [
     description: 'Saftig sjokoladekake med glasur, perfekt til bursdager.',
     prepTime: 50,
     portions: 16,
+    averageRating: 5,
     category: 'Bakst',
     imageURL: '/images/sjokoladekake.webp',
     status: 'Published',
@@ -344,6 +355,7 @@ export const recipes: Recipe[] = [
     description: 'Luftig grovbrød med sammalt hvete, godt til frokost og lunsj.',
     prepTime: 180,
     portions: 12,
+    averageRating: 3,
     category: 'Bakst',
     imageURL: '/images/grovbrod.webp',
     status: 'Published',
@@ -372,6 +384,7 @@ export const recipes: Recipe[] = [
     description: 'Myke boller med kanel og sukker, best rett fra ovnen.',
     prepTime: 120,
     portions: 16,
+    averageRating: 4.5,
     category: 'Bakst',
     imageURL: '/images/kanelboller.webp',
     status: 'Published',
@@ -401,6 +414,7 @@ export const recipes: Recipe[] = [
     description: 'Vegansk chili med bønner, mais og mye smak.',
     prepTime: 50,
     portions: 4,
+    averageRating: 3.5,
     category: 'Middag',
     imageURL: '/images/chili-sin-carne.webp',
     status: 'Published',
@@ -429,6 +443,7 @@ export const recipes: Recipe[] = [
     description: 'Varmende tomatsuppe med basilikum, god med brød til.',
     prepTime: 30,
     portions: 4,
+    averageRating: 4,
     category: 'Suppe',
     imageURL: '/images/tomatsuppe.webp',
     status: 'Published',
@@ -455,6 +470,7 @@ export const recipes: Recipe[] = [
     description: 'Tykk smoothie med frosne bær og banan, toppet med granola.',
     prepTime: 10,
     portions: 1,
+    averageRating: null,
     category: 'Frokost',
     imageURL: '/images/smoothie-bowl.webp',
     status: 'Published',
@@ -479,6 +495,7 @@ export const recipes: Recipe[] = [
     description: 'Indisk kyllinggryte i mild og kremet tomatsaus.',
     prepTime: 50,
     portions: 4,
+    averageRating: 4.5,
     category: 'Middag',
     imageURL: '/images/butter-chicken.webp',
     status: 'Published',
@@ -509,6 +526,7 @@ export const recipes: Recipe[] = [
     description: 'Hjemmelaget pizza med tomatsaus, mozzarella og basilikum.',
     prepTime: 90,
     portions: 2,
+    averageRating: 5,
     category: 'Middag',
     imageURL: '/images/pizza-margherita.webp',
     status: 'Published',
@@ -538,6 +556,7 @@ export const recipes: Recipe[] = [
     description: 'Norges nasjonalrett med fårekjøtt, kål og hel pepper.',
     prepTime: 180,
     portions: 6,
+    averageRating: 3.5,
     category: 'Middag',
     imageURL: '/images/farikal.webp',
     status: 'Published',
@@ -565,6 +584,7 @@ export const recipes: Recipe[] = [
     description: 'Myk og kremet eggerøre, klar på få minutter.',
     prepTime: 10,
     portions: 2,
+    averageRating: 3,
     category: 'Frokost',
     imageURL: '/images/eggerore.webp',
     status: 'Published',
@@ -591,6 +611,7 @@ export const recipes: Recipe[] = [
     description: 'Kremet hummus av kikerter og tahini, god som dipp.',
     prepTime: 15,
     portions: 4,
+    averageRating: 4,
     category: 'Snacks',
     imageURL: '/images/hummus.webp',
     status: 'Published',
@@ -617,6 +638,7 @@ export const recipes: Recipe[] = [
     description: 'Syrlig rabarbra under et sprøtt smuldredekke.',
     prepTime: 60,
     portions: 8,
+    averageRating: 2.5,
     category: 'Dessert',
     imageURL: '/images/rabarbrapai.webp',
     status: 'Published',
@@ -643,6 +665,7 @@ export const recipes: Recipe[] = [
     description: 'Hawaiisk risbolle med rå laks, avokado og edamame.',
     prepTime: 30,
     portions: 2,
+    averageRating: 4.5,
     category: 'Lunsj',
     imageURL: '/images/poke-bowl.webp',
     status: 'Published',
@@ -670,6 +693,7 @@ export const recipes: Recipe[] = [
     description: 'Japansk nudelsuppe med kylling, egg og vårløk.',
     prepTime: 60,
     portions: 2,
+    averageRating: null,
     category: 'Middag',
     imageURL: '/images/ramen.webp',
     status: 'Draft',
@@ -699,6 +723,7 @@ export const recipes: Recipe[] = [
     description: 'Sprø falafel av kikerter, servert i pitabrød med salat.',
     prepTime: 45,
     portions: 4,
+    averageRating: 4,
     category: 'Lunsj',
     imageURL: '/images/falafel.webp',
     status: 'Published',
@@ -727,6 +752,7 @@ export const recipes: Recipe[] = [
     description: 'Klassisk romersk pasta med egg, bacon og parmesan.',
     prepTime: 25,
     portions: 4,
+    averageRating: 5,
     category: 'Middag',
     imageURL: '/images/carbonara.webp',
     status: 'Published',
@@ -754,6 +780,7 @@ export const recipes: Recipe[] = [
     description: 'Tradisjonell dessert med risgrøt og krem, servert med rød saus.',
     prepTime: 20,
     portions: 6,
+    averageRating: 3.5,
     category: 'Dessert',
     imageURL: '/images/riskrem.webp',
     status: 'Published',
@@ -779,6 +806,7 @@ export const recipes: Recipe[] = [
     description: 'Proteinrik salat med quinoa, kikerter og friske grønnsaker.',
     prepTime: 25,
     portions: 3,
+    averageRating: 4,
     category: 'Salat',
     imageURL: '/images/quinoasalat.webp',
     status: 'Published',
@@ -805,6 +833,7 @@ export const recipes: Recipe[] = [
     description: 'Norske vafler med rømme, perfekt til kaffen.',
     prepTime: 20,
     portions: 4,
+    averageRating: 4.5,
     category: 'Dessert',
     imageURL: '/images/vafler.webp',
     status: 'Published',
@@ -832,6 +861,7 @@ export const recipes: Recipe[] = [
     description: 'Hel blomkål bakt i ovn med krydder og tahinidressing.',
     prepTime: 40,
     portions: 3,
+    averageRating: null,
     category: 'Middag',
     imageURL: '/images/ovnsbakt-blomkal.webp',
     status: 'Draft',

client/src/types/recipe.ts

@@ -35,4 +35,5 @@ export type Recipe = {
     ingredients: RecipeIngredient[];
     steps: Step[];
     tags: Tag[];
+    averageRating: number | null;
 };