Dnevni recept: tabela daily_recipes, API /api/recipes, prikaz na /rezepte

client/src/pages/recipes.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { Link } from "wouter";
 import { ChefHat, Clock, Users, X, ChevronLeft } from "lucide-react";
 import { usePageMeta } from "@/hooks/use-page-meta";
@@ -295,6 +296,50 @@ function RecipeModal({ recipe, onClose }: { recipe: Recipe; onClose: () => void
   );
 }
 
+interface DailyRecipe {
+  name: string;
+  intro?: string;
+  recipe?: string;
+  seasonNote?: string | null;
+  imageUrl?: string | null;
+}
+
+function RecipeOfTheDay() {
+  const { data } = useQuery<DailyRecipe | null>({
+    queryKey: ["/api/recipes/today"],
+    staleTime: 1000 * 60 * 30,
+  });
+  if (!data || !data.name) return null;
+  return (
+    <section className="mb-10" data-testid="section-recipe-of-day">
+      <div className="flex items-center gap-3 mb-4">
+        <div className="h-px flex-1 bg-card-border" />
+        <h2 className="text-lg font-bold text-foreground px-3">Rezept des Tages</h2>
+        <div className="h-px flex-1 bg-card-border" />
+      </div>
+      <div className="bg-card rounded-xl border border-card-border overflow-hidden md:flex">
+        {data.imageUrl && (
+          <img
+            src={data.imageUrl}
+            alt={data.name}
+            loading="lazy"
+            className="w-full md:w-1/2 aspect-video object-cover"
+            data-testid="img-recipe-of-day"
+          />
+        )}
+        <div className="p-5 md:w-1/2">
+          <h3 className="text-xl font-bold text-foreground mb-2">{data.name}</h3>
+          {data.intro && <p className="text-sm text-muted-foreground mb-3">{data.intro}</p>}
+          {data.recipe && (
+            <div className="text-sm text-foreground/80 whitespace-pre-line leading-relaxed">{data.recipe}</div>
+          )}
+          {data.seasonNote && <p className="text-xs text-primary mt-3">{data.seasonNote}</p>}
+        </div>
+      </div>
+    </section>
+  );
+}
+
 export default function RecipesPage() {
   usePageMeta("Rezepte - Alpenküche & Volksmusik", "Traditionelle Rezepte aus der Alpenküche und österreichische Hausmannskost. Kochen wie die Volksmusik-Stars bei FOLX TV.");
   const [selectedRecipe, setSelectedRecipe] = useState<Recipe | null>(null);
@@ -320,6 +365,8 @@ export default function RecipesPage() {
           Traditionelle Rezepte aus den germanischen Regionen -- von der Alm bis zur Küste, von der Oma überliefert.
         </p>
 
+        <RecipeOfTheDay />
+
         {RECIPE_REGIONS.map((region, ri) => (
           <div key={region.name} data-testid={`section-region-${ri}`}>
             <div className="flex items-center gap-3 mb-4 mt-8 first:mt-0">