Rezepte: prava baza namesto trdo zapisanih receptov, arhiv in vrtenje v widgetu

client/src/components/recipe-widget.tsx

@@ -1,33 +1,42 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useLocation } from "wouter";
-import { ChefHat, Clock, Users } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { ChefHat } from "lucide-react";
 
-interface WidgetRecipe {
-  title: string;
-  image: string;
-  time: string;
-  servings: string;
+interface DailyRecipe {
+  id: number;
+  dateStr: string;
+  name: string;
+  intro?: string;
+  imageUrl?: string | null;
 }
 
-const WIDGET_RECIPES: WidgetRecipe[] = [
-  { title: "Kaiserschmarrn", image: "/uploads/recipe-kaiserschmarrn.jpg", time: "25 Min.", servings: "2" },
-  { title: "Wiener Schnitzel", image: "/uploads/recipe-wiener-schnitzel.jpg", time: "30 Min.", servings: "4" },
-  { title: "Apfelstrudel", image: "/uploads/recipe-apfelstrudel.jpg", time: "60 Min.", servings: "6" },
-  { title: "Schweinshaxe", image: "/uploads/recipe-schweinshaxe.jpg", time: "180 Min.", servings: "4" },
-  { title: "Käsespätzle", image: "/uploads/recipe-kaesespaetzle.jpg", time: "45 Min.", servings: "4" },
-  { title: "Sachertorte", image: "/uploads/recipe-sachertorte.jpg", time: "90 Min.", servings: "8" },
-  { title: "Maultaschen", image: "/uploads/recipe-maultaschen.jpg", time: "90 Min.", servings: "4" },
-  { title: "Schlutzkrapfen", image: "/uploads/recipe-schlutzkrapfen.jpg", time: "60 Min.", servings: "4" },
-];
-
 export function RecipeWidget() {
   const [, navigate] = useLocation();
-  const dayIndex = Math.floor(Date.now() / 86400000) % WIDGET_RECIPES.length;
-  const recipe = WIDGET_RECIPES[dayIndex];
+  const [index, setIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
+
+  const { data = [] } = useQuery<DailyRecipe[]>({
+    queryKey: ["/api/recipes"],
+    staleTime: 1000 * 60 * 30,
+  });
+
+  const pool = data.filter((r) => r.imageUrl).slice(0, 10);
+
+  useEffect(() => {
+    if (paused || pool.length <= 1) return;
+    const t = setInterval(() => setIndex((i) => (i + 1) % pool.length), 8000);
+    return () => clearInterval(t);
+  }, [paused, pool.length]);
+
+  if (pool.length === 0) return null;
+  const recipe = pool[index % pool.length];
 
   return (
     <button
       onClick={() => navigate("/rezepte")}
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
       className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full text-left cursor-pointer group hover:border-primary/50 transition-colors flex flex-col min-h-[320px]"
       data-testid="widget-recipe"
     >
@@ -37,20 +46,29 @@ export function RecipeWidget() {
       </div>
       <div className="relative flex-1">
         <img
-          src={recipe.image}
-          alt={recipe.title}
+          src={recipe.imageUrl as string}
+          alt={recipe.name}
           className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
           loading="lazy"
         />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/25 to-transparent" />
         <div className="absolute bottom-0 left-0 right-0 p-3">
-          <h4 className="text-white font-bold text-base">{recipe.title}</h4>
-          <p className="text-white/60 text-xs mt-0.5 flex items-center gap-2">
-            <span className="flex items-center gap-1"><Clock className="w-3 h-3" />{recipe.time}</span>
-            <span className="flex items-center gap-1"><Users className="w-3 h-3" />{recipe.servings}</span>
-          </p>
+          <h4 className="text-white font-bold text-base leading-snug line-clamp-2">{recipe.name}</h4>
+          {recipe.intro && (
+            <p className="text-white/60 text-xs mt-1 line-clamp-2">{recipe.intro}</p>
+          )}
           <p className="text-[10px] text-primary mt-1 group-hover:underline">Alle Rezepte ansehen</p>
         </div>
+        {pool.length > 1 && (
+          <div className="absolute top-2 right-2 flex gap-1">
+            {pool.slice(0, 6).map((_, i) => (
+              <span
+                key={i}
+                className={`h-1 rounded-full transition-all ${i === index % 6 ? "bg-primary w-3" : "bg-white/40 w-1"}`}
+              />
+            ))}
+          </div>
+        )}
       </div>
     </button>
   );