Legger til porsjonsjustering på oppskriftssiden (#120)

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