jr/cooking
1
0
Fork 0
mirror of https://github.com/runyanjake/cooking.git synced 2026-03-26 09:53:17 -07:00
Code Issues Packages Projects Releases Wiki Activity

Placeholder image when no image provided for the recipe

Browse Source
This commit is contained in:
Jake Runyan 2026-02-10 09:40:25 -08:00
parent 6bbbb74e9a
commit 4cf3b526a1
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/RecipeCard.tsx
View File

@ -8,9 +8,9 @@ interface RecipeCardProps {
export default function RecipeCard({ recipe }: RecipeCardProps) { export default function RecipeCard({ recipe }: RecipeCardProps) {
// Convert relative path to public URL // Convert relative path to public URL
const imageSrc = recipe.displayPhoto.startsWith('./') const imageSrc = recipe.displayPhoto && recipe.displayPhoto.startsWith('./')
? `/recipes/${recipe.folderPath}/${recipe.displayPhoto.replace('./', '')}`.replace(/\\/g, '/') ? `/recipes/${recipe.folderPath}/${recipe.displayPhoto.replace('./', '')}`.replace(/\\/g, '/')
: recipe.displayPhoto; : recipe.displayPhoto || null;
return ( return (
<Link <Link
@ -19,14 +19,20 @@ export default function RecipeCard({ recipe }: RecipeCardProps) {
aria-label={`View recipe: ${recipe.title}`} aria-label={`View recipe: ${recipe.title}`}
> >
<div className="aspect-video bg-gray-200 dark:bg-gray-700 relative overflow-hidden"> <div className="aspect-video bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
<Image {imageSrc ? (
src={imageSrc} <Image
alt={`${recipe.title} - Recipe photo`} src={imageSrc}
fill alt={`${recipe.title} - Recipe photo`}
className="object-cover" fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" className="object-cover"
unoptimized sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/> unoptimized
/>
) : (
<div className="flex items-center justify-center h-full text-4xl text-gray-400 dark:text-gray-600">
🍽️
</div>
)}
</div> </div>
<div className="p-4 space-y-2"> <div className="p-4 space-y-2">