Restored to '7aa09373aacdcc1083018c718e608e30b6be2b33'

Replit-Restored-To: 7aa09373aa
This commit is contained in:
sebastjanartic
2026-02-28 20:34:36 +00:00
parent a8643ecdd2
commit abd322871b
76 changed files with 213 additions and 4640 deletions
-57
View File
@@ -1,57 +0,0 @@
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>
);
}