76 lines
2.7 KiB
TypeScript
76 lines
2.7 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { useLocation } from "wouter";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { ChefHat } from "lucide-react";
|
|
|
|
interface DailyRecipe {
|
|
id: number;
|
|
dateStr: string;
|
|
name: string;
|
|
intro?: string;
|
|
imageUrl?: string | null;
|
|
}
|
|
|
|
export function RecipeWidget() {
|
|
const [, navigate] = useLocation();
|
|
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"
|
|
>
|
|
<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.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/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 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>
|
|
);
|
|
}
|