Arnaud
955c4bd9dd
Replaces the single flat emoji-on-muted-bg fallback (same 🍽️/🍹 everywhere) with a deterministic gradient + food/drink icon per recipe id — pulled from a small curated palette/icon pool via a string hash, so it's stable across re-renders but visually varied across a grid of photo-less recipes. New shared lib/recipe-placeholder.ts + components/recipe/recipe-cover- placeholder.tsx, applied everywhere the old inline emoji fallback lived: recipe-grid-card.tsx, recipe-card.tsx, recipes-grid.tsx, and the public profile page's recipe grid. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
21 lines
770 B
TypeScript
21 lines
770 B
TypeScript
import { getRecipePlaceholder } from "@/lib/recipe-placeholder";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** Gradient + food/drink icon shown in place of a cover photo — deterministic per recipe id, so it stays stable across renders instead of flickering between icons/colors. */
|
|
export function RecipeCoverPlaceholder({
|
|
recipe,
|
|
className,
|
|
iconClassName,
|
|
}: {
|
|
recipe: { id: string; recipeType?: "dish" | "drink" };
|
|
className?: string;
|
|
iconClassName?: string;
|
|
}) {
|
|
const { gradient, Icon } = getRecipePlaceholder(recipe);
|
|
return (
|
|
<div className={cn("w-full h-full flex items-center justify-center bg-gradient-to-br", gradient, className)}>
|
|
<Icon className={cn("h-10 w-10 text-foreground/30", iconClassName)} strokeWidth={1.5} />
|
|
</div>
|
|
);
|
|
}
|