From bda9509efd93047ceaa1fbe922ba621540700de1 Mon Sep 17 00:00:00 2001
From: Amalie <amalisso@stud.ntnu.no>
Date: Thu, 1 Oct 2026 10:52:51 +0200
Subject: [PATCH] =?UTF-8?q?Har=20lagt=20RecipeCards=20og=20RecipeList=20p?=
 =?UTF-8?q?=C3=A5=20siden=20under=20oppskrifter(#24)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/recipe/RecipeCard.tsx | 6 +++---
 client/src/components/recipe/RecipeList.tsx | 4 ++--
 client/src/routes/RecipeListPage.tsx        | 3 +++
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/src/components/recipe/RecipeCard.tsx b/client/src/components/recipe/RecipeCard.tsx
index ce55e76..a189a4e 100644
--- a/client/src/components/recipe/RecipeCard.tsx
+++ b/client/src/components/recipe/RecipeCard.tsx
@@ -7,9 +7,9 @@ type RecipeCardProps = {
 
 export function RecipeCard({ recipe }: RecipeCardProps) {
     return (
-        <article>
-            <img src={recipe.imageURL} alt={recipe.title}/>
-            <h3>{recipe.title}</h3>
+        <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>
diff --git a/client/src/components/recipe/RecipeList.tsx b/client/src/components/recipe/RecipeList.tsx
index dad884a..cf72f88 100644
--- a/client/src/components/recipe/RecipeList.tsx
+++ b/client/src/components/recipe/RecipeList.tsx
@@ -8,9 +8,9 @@ type RecipeListProps = {
 
 export function RecipeList({ recipes }: RecipeListProps) {
     return (
-        <ul>
+        <ul className="mt-8 grid grid-cols-2 gap-6 sm:grid-cols-2 lg:grid-cols-4">
             {recipes.map((recipe)=> (
-                <li key={recipe.recipeId}>
+                <li key={recipe.recipeId} className="h-full">
                     <RecipeCard recipe={recipe} />
                 </li>
             ))}
diff --git a/client/src/routes/RecipeListPage.tsx b/client/src/routes/RecipeListPage.tsx
index 59cc546..9db5c1a 100644
--- a/client/src/routes/RecipeListPage.tsx
+++ b/client/src/routes/RecipeListPage.tsx
@@ -1,4 +1,6 @@
 import { useSearchParams } from 'react-router';
+import { RecipeList } from '../components/recipe/RecipeList';
+import { recipes} from '../mocks/recipes';
 
 // Listen over alle oppskrifter eller søksresultatet
 // Selve søkefeltet ligger i headeren. Resultatene kobles til senere.
@@ -11,6 +13,7 @@ export default function RecipeListPage() {
       <h1 className="font-heading text-4xl md:text-5xl">Oppskrifter</h1>
 
       {query && <p className="mt-4">Alt med «{query}»</p>}
+      <RecipeList recipes={ recipes } />
     </>
   );
 }