Lagt til slideshow med tre karuseller på forsiden (#52)

client/package.json

@@ -13,6 +13,8 @@
     "@apollo/client": "^4.3.1",
     "@radix-ui/react-dialog": "^1.1.23",
     "@tailwindcss/vite": "^4.3.3",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "graphql": "^16.11.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",

client/src/components/slideshow/RecipeSlideshow.tsx

@@ -0,0 +1,105 @@
+import type { Recipe } from '../../types/recipe';
+import useEmblaCarousel from 'embla-carousel-react';
+import { Link } from 'react-router';
+import { useEffect, useState } from 'react';
+
+// Fargetemaer for slidesene. panel er tekstboksen, button er knappen for å se en oppskrift
+type SlideshowTheme = 'light' | 'dark' | 'rose';
+
+const themes = {
+    light: { panel: 'bg-secondary/50 text-olive-dark', button: 'bg-olive-dark text-background', dot: 'border-olive-dark', dotActive: 'bg-olive-dark' },
+    dark: { panel: 'bg-olive-dark text-background', button: 'bg-pink-light text-olive-dark', dot: 'border-background', dotActive: 'bg-background' },
+    rose: { panel: 'bg-pink text-pink-light', button: 'bg-primary-hover text-pink-light', dot: 'border-background', dotActive: 'bg-background' },
+}
+
+type RecipeSlideshowProps = {
+    recipes: Recipe[];
+    reversed?: boolean; // Denne er valgfri, og gjør at karusellen i midten er speilvendt
+    theme?: SlideshowTheme; 
+};
+
+// Slideshow på forsiden som viser én oppskrift av gangen.
+// Det er mulig å bla med piler, prikkene, sveiping eller med tastaturet.
+export function RecipeSlideshow({ recipes, reversed = false, theme = 'light' }: RecipeSlideshowProps) {
+    // emblaRef kobler Embla opp til vinduet, også brukes emblaAPI til å styre slideshowet.
+    const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
+    // Husker hvilken av sidene i slideshowet som vises, sånn at riktig prikk blir farget inn.
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const colors = themes[theme];
+
+    // Oppdaterer selectedIndex hver gang det byttes hvilken side som vises.
+    useEffect(() => {
+        if(!emblaApi) return;
+        const onSelect = () => setSelectedIndex(emblaApi.selectedScrollSnap());
+        emblaApi.on('select', onSelect);
+
+        // Slutter å lytte når slideshowet fjernes fra siden, sånn at det ikke blir minnelekkasjer.
+        return () => {
+            emblaApi.off('select', onSelect);
+        };
+    }, [emblaApi]);
+
+    return (
+        <section aria-label="Utvalgte oppskrifter" className="relative">
+            {/* Vinduet: det skjuler slidene som ikke vises */}
+            <div className="overflow-hidden" ref={emblaRef}>
+                {/* Raden med alle slidene som Embla flytter sidelengs */}
+                <div className="flex">
+                    {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">
+                                {/* 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=""/>
+                                 <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>
+                                    </div>
+                                    <Link to={`/recipes/${recipe.recipeId}`} className={`self-start rounded-full ${colors.button} px-6 py-3 hover:opacity-90`}>Se oppskrift</Link>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {/* Pilknapper for å kunne bla. aria-label gir skjermlesere en tekst, ettersom pilene bare er symboler */}
+            <button 
+                type="button"
+                aria-label="Forrige oppskrift"
+                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"
+            >
+               ← 
+            </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"
+            >
+                →
+            </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. */}
+            <div className={`absolute bottom-4 flex gap-2 ${reversed ? 'left-4' : 'right-4'}`}>
+                {recipes.map((recipe, index) => (
+                    <button
+                        key={recipe.recipeId}
+                        type="button"
+                        aria-label={`Gå til ${recipe.title}`}
+                        aria-current={index === selectedIndex}
+                        onClick={() => emblaApi?.scrollTo(index)}
+                        className={`h-3 w-3 rounded-full border ${colors.dot} ${
+                            index === selectedIndex ? colors.dotActive : 'bg-transparent'
+                        }`}
+                    />
+                ))}
+            </div>
+        </section>
+    );
+}

client/src/index.css

@@ -13,6 +13,7 @@
 
   --color-secondary: #c2c395;
   --color-olive: #999d4f;
+  --color-olive-dark: #343301;
 
   --color-pink-light: #f2c6cf;
   --color-pink: #b46a72;

client/src/routes/HomePage.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react'
 import { Tag } from '../components/ui/Tag'
+import { RecipeSlideshow } from '../components/slideshow/RecipeSlideshow'
+import { recipes } from '../mocks/recipes'
 
 
 
@@ -12,19 +14,12 @@ export default function HomePage() {
 
       <div className="max-w-6xl mx-auto px-6 py-10">
 
-        {/* Slideshow-placeholder */}
-        <section
-          className="
-            w-full
-            h-80
-            rounded-large
-            bg-gray-200
-            flex items-center justify-center
-            text-gray-500
-          "
-        >
-          Slideshow kommer her
-        </section>
+        <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>
+