Arnaud
51e6722f4c
Two changes to the no-photo cover placeholder shipped last version: 1. Muted the gradient palette (100/40-opacity tints instead of solid -200/ -950 stops) — the original was too saturated next to real cover photos in the same grid, per feedback. 2. New coverIcon/coverColor columns on recipes (nullable text, migration 0048, additive-only) let the author pin a specific color+icon from the recipe editor instead of the automatic per-id pick. getRecipePlaceholder now checks these first, falling back to the deterministic hash pick when unset — existing recipes are unaffected until edited. Wired coverIcon/coverColor through every explicit-column recipe select that feeds a grid card (explore trending/recent, search, feed, for-you) — the relational-query call sites (recipes page, collections, profile pages) already return all columns and needed no changes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
21 lines
834 B
TypeScript
21 lines
834 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"; 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)}>
|
|
<Icon className={cn("h-10 w-10 text-foreground/25", iconClassName)} strokeWidth={1.5} />
|
|
</div>
|
|
);
|
|
}
|