From eade2ace4a0cfaf7159800ddc045b2c96d5aee04 Mon Sep 17 00:00:00 2001
From: Mari Zhevagin <maribz@stud.ntnu.no>
Date: Thu, 15 Oct 2026 19:45:35 +0200
Subject: [PATCH 1/2] =?UTF-8?q?placeholder=20bilde=20n=C3=A5r=20oppskrift?=
 =?UTF-8?q?=20mangler=20bilde?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/recipe/RecipeCard.tsx   |  3 +-
 client/src/components/recipe/RecipeDetail.tsx |  3 +-
 .../components/slideshow/RecipeSlideshow.tsx  |  3 +-
 client/src/components/ui/RecipeImage.tsx      | 44 +++++++++++++++++++
 4 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/ui/RecipeImage.tsx

diff --git a/client/src/components/recipe/RecipeCard.tsx b/client/src/components/recipe/RecipeCard.tsx
index 2ed1314..30fd3ee 100644
--- a/client/src/components/recipe/RecipeCard.tsx
+++ b/client/src/components/recipe/RecipeCard.tsx
@@ -1,6 +1,7 @@
 import type { Recipe } from '../../types/recipe';
 import { Link } from 'react-router';
 import { Rating } from '@mui/material';
+import { RecipeImage } from '../ui/RecipeImage';
 
 // Sier hva komponenten får inn.
 type RecipeCardProps = {
@@ -11,7 +12,7 @@ export function RecipeCard({ recipe }: RecipeCardProps) {
     return (
         <Link to={`/recipes/${recipe.id}`} 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 flex flex-col">
-                <img className="w-full aspect-square object-cover rounded-md" src={recipe.imageUrl ?? '/images/placeholder.webp'} alt={recipe.title}/>
+                <RecipeImage imageUrl={recipe.imageUrl} alt={recipe.title} className="w-full aspect-square rounded-md" />
                 <h3 className="text-lg font-semibold group-hover:underline min-h-14">{recipe.title}</h3>
                 <div className="flex justify-between">
                     <p>{recipe.prepTimeMinutes} minutter</p>
diff --git a/client/src/components/recipe/RecipeDetail.tsx b/client/src/components/recipe/RecipeDetail.tsx
index 4f6f4ab..2a96c2d 100644
--- a/client/src/components/recipe/RecipeDetail.tsx
+++ b/client/src/components/recipe/RecipeDetail.tsx
@@ -3,6 +3,7 @@ import RestaurantIcon from '@mui/icons-material/Restaurant';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import { useState } from 'react';
 import { Rating } from '@mui/material';
+import { RecipeImage } from '../ui/RecipeImage';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
@@ -62,7 +63,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                 </div>
             </section>
             <section className="rounded-lg">
-                <img className="w-full h-72 object-cover bg-pink-dark rounded-lg" src={recipe.imageUrl ?? '/images/placeholder.webp'} alt={recipe.title}/>
+                <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>
diff --git a/client/src/components/slideshow/RecipeSlideshow.tsx b/client/src/components/slideshow/RecipeSlideshow.tsx
index 14d0b9a..f22a70d 100644
--- a/client/src/components/slideshow/RecipeSlideshow.tsx
+++ b/client/src/components/slideshow/RecipeSlideshow.tsx
@@ -2,6 +2,7 @@ import type { Recipe } from '../../types/recipe';
 import useEmblaCarousel from 'embla-carousel-react';
 import { Link } from 'react-router';
 import { useEffect, useState } from 'react';
+import { RecipeImage } from '../ui/RecipeImage';
 import Autoplay from 'embla-carousel-autoplay';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import RestaurantIcon from '@mui/icons-material/Restaurant';
@@ -91,7 +92,7 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
                                     <Link to={`/recipes/${recipe.id}`} className="self-start rounded-full bg-olive-dark text-background px-4 py-2 text-sm md:text-base md:px-6 md:py-3 hover:opacity-90 flex items-center gap-1">Se oppskrift<ArrowForwardIcon/></Link>
                                 </div>
                                 {/* Tomt alternativ for bildet, ettersom tittelen allerede står rett ved siden av bildet. */}
-                                <img className="bg-olive-dark/10 order-first md:order-0 w-full h-80 md:h-full object-cover rounded-lg " src={recipe.imageUrl ?? '/images/placeholder.webp'} alt=""/>
+                                <RecipeImage imageUrl={recipe.imageUrl} alt="" className="order-first md:order-0 w-full h-80 md:h-full rounded-lg" />
                             </div>
                         </div>
                     ))}
diff --git a/client/src/components/ui/RecipeImage.tsx b/client/src/components/ui/RecipeImage.tsx
new file mode 100644
index 0000000..ccd3a9d
--- /dev/null
+++ b/client/src/components/ui/RecipeImage.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import RestaurantIcon from '@mui/icons-material/Restaurant';
+
+type RecipeImageProps = {
+  imageUrl: string | null | undefined;
+  alt: string;
+  // størrelse og hjørner bestemmes av den som bruker komponenten
+  className?: string;
+};
+
+// viser bildet til oppskriften eller en tegnet tallerken hvis bildet mangler
+export function RecipeImage({
+  imageUrl,
+  alt,
+  className = '',
+}: RecipeImageProps) {
+  // bytter til tallerken hvis bildefilen ikke finnes
+  const [failed, setFailed] = useState(false);
+
+  if (imageUrl && !failed) {
+    return (
+      <img
+        src={imageUrl}
+        alt={alt}
+        onError={() => setFailed(true)}
+        className={`object-cover ${className}`}
+      />
+    );
+  }
+
+  return (
+    <div
+      aria-hidden="true"
+      className={`flex items-center justify-center bg-secondary/50 ${className}`}
+    >
+      <div className="flex aspect-square h-[70%] items-center justify-center rounded-full border-3 border-olive-dark bg-background">
+        <div className="flex aspect-square h-2/3 items-center justify-center rounded-full border border-olive text-olive-dark">
+          {/* ikonet skalerer med tallerkenen */}
+          <RestaurantIcon sx={{ width: '35%', height: '35%' }} />
+        </div>
+      </div>
+    </div>
+  );
+}

From 8cd2e9da4e766f3070ec68346c7beaf112869365 Mon Sep 17 00:00:00 2001
From: Mari Brokke Zhevagin <maribz@stud.ntnu.no>
Date: Thu, 15 Oct 2026 20:32:42 +0200
Subject: [PATCH 2/2] fikset kommentarer

---
 client/src/components/ui/RecipeImage.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/components/ui/RecipeImage.tsx b/client/src/components/ui/RecipeImage.tsx
index ccd3a9d..a052cff 100644
--- a/client/src/components/ui/RecipeImage.tsx
+++ b/client/src/components/ui/RecipeImage.tsx
@@ -4,17 +4,16 @@ import RestaurantIcon from '@mui/icons-material/Restaurant';
 type RecipeImageProps = {
   imageUrl: string | null | undefined;
   alt: string;
-  // størrelse og hjørner bestemmes av den som bruker komponenten
   className?: string;
 };
 
-// viser bildet til oppskriften eller en tegnet tallerken hvis bildet mangler
+// viser bildet til oppskriften eller en tegning hvis bildet mangler
 export function RecipeImage({
   imageUrl,
   alt,
   className = '',
 }: RecipeImageProps) {
-  // bytter til tallerken hvis bildefilen ikke finnes
+  // bytter til tegning hvis bilde ikke finnes
   const [failed, setFailed] = useState(false);
 
   if (imageUrl && !failed) {
@@ -35,7 +34,7 @@ export function RecipeImage({
     >
       <div className="flex aspect-square h-[70%] items-center justify-center rounded-full border-3 border-olive-dark bg-background">
         <div className="flex aspect-square h-2/3 items-center justify-center rounded-full border border-olive text-olive-dark">
-          {/* ikonet skalerer med tallerkenen */}
+          {/* ikonet tilpasser seg til tallerkenen */}
           <RestaurantIcon sx={{ width: '35%', height: '35%' }} />
         </div>
       </div>