Restored to '84d7de2da64f8f2fd1e2d64959817c64c8fb7c04'

Replit-Restored-To: 84d7de2da6
2026-02-28 20:36:50 +00:00
parent 802282187e
commit c441cc1594
76 changed files with 4644 additions and 212 deletions
@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { useLocation } from "wouter";
+import { ChefHat, Clock, Users } from "lucide-react";
+
+interface WidgetRecipe {
+  title: string;
+  image: string;
+  time: string;
+  servings: string;
+}
+
+const WIDGET_RECIPES: WidgetRecipe[] = [
+  { title: "Kaiserschmarrn", image: "/uploads/recipe-kaiserschmarrn.png", time: "25 Min.", servings: "2" },
+  { title: "Wiener Schnitzel", image: "/uploads/recipe-wiener-schnitzel.png", time: "30 Min.", servings: "4" },
+  { title: "Apfelstrudel", image: "/uploads/recipe-apfelstrudel.png", time: "60 Min.", servings: "6" },
+  { title: "Schweinshaxe", image: "/uploads/recipe-schweinshaxe.png", time: "180 Min.", servings: "4" },
+  { title: "Käsespätzle", image: "/uploads/recipe-kaesespaetzle.png", time: "45 Min.", servings: "4" },
+  { title: "Sachertorte", image: "/uploads/recipe-sachertorte.png", time: "90 Min.", servings: "8" },
+  { title: "Maultaschen", image: "/uploads/recipe-maultaschen.png", time: "90 Min.", servings: "4" },
+  { title: "Schlutzkrapfen", image: "/uploads/recipe-schlutzkrapfen.png", 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];
+
+  return (
+    <button
+      onClick={() => navigate("/rezepte")}
+      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"
+      data-testid="widget-recipe"
+    >
+      <div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
+        <ChefHat className="w-4 h-4 text-primary" />
+        <h3 className="font-bold text-card-foreground text-sm">Rezept des Tages</h3>
+      </div>
+      <div className="relative flex-1">
+        <img
+          src={recipe.image}
+          alt={recipe.title}
+          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 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>
+          <p className="text-[10px] text-primary mt-1 group-hover:underline">Alle Rezepte ansehen</p>
+        </div>
+      </div>
+    </button>
+  );
+}