32 lines
770 B
TypeScript
32 lines
770 B
TypeScript
export function Card(
|
|
{ link, title, image }: { link?: string; title?: string; image?: string },
|
|
) {
|
|
return (
|
|
<a
|
|
href={link}
|
|
style={{
|
|
backgroundImage: `url(${image})`,
|
|
backgroundSize: "cover",
|
|
//background: "#2B2930",
|
|
}}
|
|
class="text-white rounded-3xl shadow-md p-4 relative overflow-hidden
|
|
lg:w-56 lg:h-56
|
|
sm:w-48 sm:h-48
|
|
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"
|
|
style={{ background: "linear-gradient(transparent, #000e)" }}
|
|
/>
|
|
</a>
|
|
);
|
|
}
|