From 5c63f6d70a3ce3e0cf3820c4a9a47b09de0395c9 Mon Sep 17 00:00:00 2001
From: Amalie <amalisso@stud.ntnu.no>
Date: Thu, 1 Oct 2026 13:19:49 +0200
Subject: [PATCH] =?UTF-8?q?Kan=20n=C3=A5=20trykke=20p=C3=A5=20RecipeCard?=
 =?UTF-8?q?=20for=20=C3=A5=20f=C3=A5=20opp=20full=20recipe=20(#37)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/recipe/RecipeCard.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/client/src/components/recipe/RecipeCard.tsx b/client/src/components/recipe/RecipeCard.tsx
index a189a4e..2cdc3e2 100644
--- a/client/src/components/recipe/RecipeCard.tsx
+++ b/client/src/components/recipe/RecipeCard.tsx
@@ -1,4 +1,5 @@
 import type { Recipe } from '../../types/recipe';
+import { Link } from 'react-router';
 
 // Sier hva komponenten får inn.
 type RecipeCardProps = {
@@ -7,14 +8,16 @@ type RecipeCardProps = {
 
 export function RecipeCard({ recipe }: RecipeCardProps) {
     return (
-        <article className="border border-olive rounded-lg p-4 text-black h-full bg-secondary/50">
-            <img className="w-full aspect-square object-cover rounded-md" src={recipe.imageURL} alt={recipe.title}/>
-            <h3 className="text-lg font-semibold">{recipe.title}</h3>
-            <div className="flex justify-between">
-                <p>{recipe.prepTime} minutter</p>
-                <p>{recipe.portions} porsjoner</p>
-            </div>
-        </article>
+        <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 group">
+                <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>
+                <div className="flex justify-between">
+                    <p>{recipe.prepTime} minutter</p>
+                    <p>{recipe.portions} porsjoner</p>
+                </div>
+            </article>
+        </Link>
     );
 }