54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { isYoutubeLink } from "@lib/string.ts";
|
|
import { IconBrandYoutube } from "@components/icons.tsx";
|
|
|
|
export function Card(
|
|
{ link, title, image, backgroundSize = 100 }: {
|
|
backgroundSize?: number;
|
|
link?: string;
|
|
title?: string;
|
|
image?: string;
|
|
},
|
|
) {
|
|
const backgroundStyle = {
|
|
backgroundImage: `url(${image})`,
|
|
backgroundSize: "cover",
|
|
boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff1 inset",
|
|
};
|
|
|
|
if (backgroundSize !== 100) {
|
|
backgroundStyle["backgroundSize"] = `${backgroundSize}%`;
|
|
backgroundStyle["backgroundRepeat"] = "no-repeat";
|
|
backgroundStyle["backgroundPosition"] = "center";
|
|
}
|
|
|
|
return (
|
|
<a
|
|
href={link}
|
|
style={backgroundStyle}
|
|
class="text-white rounded-3xl shadow-md p-4 relative
|
|
lg:w-56 lg:h-56
|
|
sm:w-48 sm:h-48
|
|
w-[37vw] h-[37vw]"
|
|
>
|
|
{!image?.includes("placeholder.svg") &&
|
|
(
|
|
<img
|
|
class="absolute opacity-30 top-0 left-0 object-cover w-full h-full -z-10"
|
|
src={image}
|
|
style={{ filter: "blur(30px)" }}
|
|
/>
|
|
)}
|
|
<div class="h-full flex flex-col justify-between relative z-10">
|
|
<div>
|
|
{/* Recipe Card content */}
|
|
</div>
|
|
<div class="mt-2 flex items-center gap-2">
|
|
{isYoutubeLink(link || "") && <IconBrandYoutube />}
|
|
{title}
|
|
</div>
|
|
</div>
|
|
<div class="absolute inset-x-0 bottom-0 h-3/4" />
|
|
</a>
|
|
);
|
|
}
|