30 lines
833 B
TypeScript
30 lines
833 B
TypeScript
import { Recipe } from "../lib/recipes.ts";
|
|
|
|
export function RecipeCard({ recipe }: { recipe: Recipe }) {
|
|
return (
|
|
<a
|
|
href={`/recipes/${recipe.id}`}
|
|
style={{
|
|
backgroundImage: `url(${
|
|
recipe?.meta?.image || "/api/recipes/images/placeholder.jpg"
|
|
}?width=200&height=200)`,
|
|
backgroundSize: "cover",
|
|
}}
|
|
class="bg-gray-900 text-white rounded-3xl shadow-md p-4 relative overflow-hidden
|
|
lg:w-56 lg:h-56
|
|
sm:w-40 sm:h-40
|
|
w-32 h-32"
|
|
>
|
|
<div class="h-full flex flex-col justify-between relative z-10">
|
|
<div>
|
|
{/* Recipe Card content */}
|
|
</div>
|
|
<div class="mt-2">
|
|
{recipe.name}
|
|
</div>
|
|
</div>
|
|
<div class="absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black to-transparent" />
|
|
</a>
|
|
);
|
|
}
|