Fikset slideshowet og la til dekorative ikoner (#54)

client/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@apollo/client": "^4.3.1",
+    "@mui/icons-material": "^9.4.0",
     "@radix-ui/react-dialog": "^1.1.23",
     "@tailwindcss/vite": "^4.3.3",
     "embla-carousel-autoplay": "^8.6.0",

client/src/components/recipe/RecipeDetail.tsx

@@ -1,4 +1,6 @@
 import type { Recipe } from '../../types/recipe';
+import RestaurantIcon from '@mui/icons-material/Restaurant';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
 
 // Sier hva komponenten får inn.
 type RecipeDetailProps = {
@@ -21,8 +23,8 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                     <p>{recipe.description}</p>
                 </div>
                 <div className="flex justify-between">
-                    <p className="border border-olive rounded-full">{recipe.prepTime} minutter</p>
-                    <p className="border border-olive rounded-full">{recipe.portions} porsjoner</p>
+                    <p className="border border-olive rounded-full flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTime} minutter</p>
+                    <p className="border border-olive rounded-full flex items-center gap-1"><RestaurantIcon/>{recipe.portions} porsjoner</p>
                 </div>
             </section>
             <section className="rounded-lg">

client/src/components/slideshow/RecipeSlideshow.tsx

@@ -2,6 +2,10 @@ import type { Recipe } from '../../types/recipe';
 import useEmblaCarousel from 'embla-carousel-react';
 import { Link } from 'react-router';
 import { useEffect, useState } from 'react';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import RestaurantIcon from '@mui/icons-material/Restaurant';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
 // Fargetemaer for slidesene. panel er tekstboksen, button er knappen for å se en oppskrift
 type SlideshowTheme = 'light' | 'dark' | 'rose';
@@ -49,17 +53,24 @@ export function RecipeSlideshow({ recipes, reversed = false, theme = 'light' }:
                     {recipes.map((recipe) => (
                         // Én slide som bruker hele bredden i vinduet
                         <div key={recipe.recipeId} className="min-w-0 flex-[0_0_100%]">
-                            <div className="grid md:grid-cols-2 overflow-hidden">
+                            <div className="grid md:grid-cols-2 overflow-hidden rounded-xl">
                                 {/* Tomt alternativ for bildet, ettersom tittelen allerede står rett ved siden av bildet. */}
-                                <img className={`w-full h-80 object-cover ${reversed ? 'md:order-last' : ''}`} src={recipe.imageURL} alt=""/>
+                                <img className={`w-full h-80 md:h-full object-cover ${reversed ? 'md:order-last' : ''}`} src={recipe.imageURL} alt=""/>
                                  <div className={`py-8 px-20 flex flex-col justify-center gap-4 ${colors.panel}`}>
                                     <h3 className="font-heading text-4xl md:text-5xl">{recipe.title}</h3>
                                     <p>{recipe.description}</p>
                                     <div className="flex gap-6">
-                                        <p>{recipe.prepTime} min</p>
-                                        <p>{recipe.portions} porsjoner</p>
+                                        <p className="flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTime} min</p>
+                                        <p className="flex items-center gap-1"><RestaurantIcon/>{recipe.portions} porsjoner</p>
                                     </div>
-                                    <Link to={`/recipes/${recipe.recipeId}`} className={`self-start rounded-full ${colors.button} px-6 py-3 hover:opacity-90`}>Se oppskrift</Link>
+                                    <ul className="flex flex-wrap gap-2 mb-4">
+                                        {recipe.tags.map((tag) => (
+                                            <li className="rounded-full border border-olive-dark text-olive-dark px-3 py-1 text-sm" key={tag.tagId}>
+                                                {tag.tagName}
+                                            </li>
+                                        ))}
+                                    </ul>
+                                    <Link to={`/recipes/${recipe.recipeId}`} className={`self-start rounded-full ${colors.button} px-6 py-3 hover:opacity-90 flex items-center gap-1`}>Se oppskrift<ArrowForwardIcon/></Link>
                                 </div>
                             </div>
                         </div>
@@ -74,15 +85,15 @@ export function RecipeSlideshow({ recipes, reversed = false, theme = 'light' }:
                 onClick={() => emblaApi?.scrollPrev()}
                 className="absolute left-4 top-1/2 -translate-y-1/2 flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
             >
-               ← 
+               <ArrowBackIcon/>
             </button>
             <button 
                 type="button"
                 aria-label="Neste oppskrift"
                 onClick={() => emblaApi?.scrollNext()}
                 className="absolute right-4 top-1/2 -translate-y-1/2 flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
             >
-                →
+                <ArrowForwardIcon/>
             </button>
 
             {/* Prikker: én prikk per oppskrift. Den siden som vises er fylt inn. Dersom du trykker på en annen prikk hopper du til den siden. */}

client/src/routes/HomePage.tsx

@@ -14,11 +14,9 @@ export default function HomePage() {
 
       <div className="max-w-6xl mx-auto px-6 py-10">
 
-        <div className="space-y-2">
-          <RecipeSlideshow recipes={recipes.slice(0, 5)} theme="light"/>
-          <RecipeSlideshow recipes={recipes.slice(5, 10)} reversed theme="dark"/>
-          <RecipeSlideshow recipes={recipes.slice(10, 15)} theme="rose"/>
-        </div>
+
+        <RecipeSlideshow recipes={recipes.slice(0, 5)} theme="light"/>
+