e90bd8cae4
Convert images to JPG for optimization and ensure correct Open Graph tags are used for social media sharing. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1f7e7e89-a520-4970-9645-37daadc466dc Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 30e90049-0ceb-4261-a159-b687b34f680b Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/1f7e7e89-a520-4970-9645-37daadc466dc/s81zXmM Replit-Helium-Checkpoint-Created: true
58 lines
2.7 KiB
TypeScript
58 lines
2.7 KiB
TypeScript
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.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];
|
|
|
|
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 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.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>
|
|
);
|
|
}
|