From a7333eca354bdf94593b9f1f92805c87af732c75 Mon Sep 17 00:00:00 2001
From: Amalie <amalisso@stud.ntnu.no>
Date: Thu, 15 Oct 2026 23:59:12 +0200
Subject: [PATCH] =?UTF-8?q?Legger=20til=20porsjonsjustering=20p=C3=A5=20op?=
 =?UTF-8?q?pskriftssiden=20(#120)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/recipe/RecipeDetail.tsx | 41 +++++++++++++++++--
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/client/src/components/recipe/RecipeDetail.tsx b/client/src/components/recipe/RecipeDetail.tsx
index 2a96c2d..e851c6e 100644
--- a/client/src/components/recipe/RecipeDetail.tsx
+++ b/client/src/components/recipe/RecipeDetail.tsx
@@ -2,10 +2,12 @@ import type { Recipe } from '../../types/recipe';
 import RestaurantIcon from '@mui/icons-material/Restaurant';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import { useState } from 'react';
-import { Rating } from '@mui/material';
+import { Rating, Stack, Typography, IconButton } from '@mui/material';
 import { RecipeImage } from '../ui/RecipeImage';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
 
 // Sier hva komponenten får inn.
 type RecipeDetailProps = {
@@ -14,6 +16,7 @@ type RecipeDetailProps = {
 
 export function RecipeDetail({ recipe }: RecipeDetailProps) {
     const [checkedIds, setCheckedIds] = useState<String[]>([]);
+    const [servings, setServings] = useState(recipe.servings);
 
     function toggleIngredient(id: string) {
         setCheckedIds((prev)=>
@@ -66,7 +69,39 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                 <RecipeImage imageUrl={recipe.imageUrl} alt={recipe.title} className="w-full h-72 rounded-lg" />
             </section>
             <section className="border border-olive rounded-lg p-4 bg-background">
-                <h2 className="text-2xl font-semibold">Ingredienser</h2>
+                <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+                    <h2 className="text-2xl font-semibold">Ingredienser</h2>
+                    <Stack direction="row" sx={{ alignItems: 'center', border: 1, borderColor: 'var(--color-pink-light)', borderRadius: 3, p: 0.5}}>
+                        <IconButton
+                            sx={{
+                                width: 40, 
+                                height: 40, 
+                                borderRadius: 2, 
+                                bgcolor: 'color-mix(in srgb, var(--color-peach) 50%, transparent)'
+                            }}
+                            onClick={() => setServings(servings - 1)}
+                            disabled={servings <= 1}
+                            aria-label='Færre porsjoner'
+                        >
+                            <RemoveIcon/>
+                        </IconButton>
+                        <Typography sx={{ px: 2}}>
+                            {servings}
+                        </Typography>
+                        <IconButton
+                            sx={{
+                                width: 40, 
+                                height: 40,
+                                borderRadius: 2, 
+                                bgcolor: 'color-mix(in srgb, var(--color-peach) 50%, transparent)'
+                            }}
+                            onClick={() => setServings(servings + 1)}
+                            aria-label='Flere porsjoner'
+                        >
+                            <AddIcon/>
+                        </IconButton>
+                    </Stack>
+                </Stack>
                 <ul>
                     {recipe.ingredients.map((ingredient) => (
                         <li key={ingredient.id}>
@@ -83,7 +118,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                                 }
                                 label={
                                     <span className={checkedIds.includes(ingredient.id) ? 'line-through opacity-60' : ''}>
-                                        {`${ingredient.amount} ${ingredient.unit} ${ingredient.name}`}
+                                        {`${ingredient.amount * servings/recipe.servings} ${ingredient.unit} ${ingredient.name}`}
                                     </span>
                                 }
                             />