Arnaud
1bfd03c42e
text-foreground/25 alpha compounded wherever an icon's own stroke paths overlap (chef-hat's brim/band, croissant's curves), reading as a dark blotch instead of an even tint. Swapped to text-muted-foreground — solid, themed, no overlap artifacts. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
24 lines
1.0 KiB
TypeScript
24 lines
1.0 KiB
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"; coverIcon?: string | null; coverColor?: string | null };
|
|
className?: string;
|
|
iconClassName?: string;
|
|
}) {
|
|
const { gradient, Icon } = getRecipePlaceholder(recipe);
|
|
return (
|
|
<div className={cn("w-full h-full flex items-center justify-center bg-muted bg-gradient-to-br", gradient, className)}>
|
|
{/* Solid color, not opacity — an alpha stroke darkens wherever an
|
|
icon's own paths overlap (visible on icons like ChefHat/Croissant),
|
|
reading as an uneven blotch instead of a flat, even tint. */}
|
|
<Icon className={cn("h-10 w-10 text-muted-foreground", iconClassName)} strokeWidth={1.5} />
|
|
</div>
|
|
);
|
|
}
|