Kan nå trykke på RecipeCard for å få opp full recipe (#37)

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>
     );
 }