30 lines
754 B
TypeScript
30 lines
754 B
TypeScript
import { Recipe } from "../lib/recipes.ts";
|
|
|
|
export function Card(
|
|
{ link, title, image }: { link?: string; title?: string; image?: string },
|
|
) {
|
|
return (
|
|
<a
|
|
href={link}
|
|
style={{
|
|
backgroundImage: `url(${image})`,
|
|
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">
|
|
{title}
|
|
</div>
|
|
</div>
|
|
<div class="absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black to-transparent" />
|
|
</a>
|
|
);
|
|
}
|